HTML5基础加强css样式篇（css属性border圆角：border-radius）（三十五）

来源：互联网发布：oracle 编程书籍推荐编辑：程序博客网时间：2024/05/29 09:59

1.制作圆角：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            /* .box 默认样式 */            margin: 200px 0 0 200px;            width: 200px;            height: 200px;            background-color: orange;            /*①*/            border-radius: 50px;/*②*/            border-radius: 50px 20px; /*③*/            border-radius: 50px 20px 5px; /*④*/            border-radius: 50px 20px 5px 80px;         }        .box:hover {            /* 鼠标悬浮时样式 */        }    </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

效果如下：

①②③④

2.使用圆角制作椭圆：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            /* .box 默认样式 */            margin: 200px 0 0 200px;            width: 400px;            height: 200px;            background-color: orange;            /*border-radius: 水平半径 / 垂直半径*/            border-radius: 200px/100px;            border-radius: 200px 50px/ 100px 5px;            border-radius: 200px 50px 10px / 100px 5px 60px;        }        .box:hover {            /* 鼠标悬浮时样式 */        }    </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

效果：

3.画1/4圆代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            /* .box 默认样式 */            margin: 200px 0 0 200px;            width: 200px;            height: 200px;            background-color: orange;            border-radius: 200px 0 0 0;        }        .box:hover {            /* 鼠标悬浮时样式 */        }    </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

效果如下：

4.画一个半圆：

代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            /* .box 默认样式 */            margin: 200px 0 0 200px;            width: 400px;            height: 200px;            background-color: orange;            border-radius: 200px 200px 0 0;        }        .box:hover {            /* 鼠标悬浮时样式 */        }    </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

效果图如下：

5.border中百分比的使用：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            /* .box 默认样式 */            margin: 200px 0 0 200px;            width: 200px;            height: 200px;            background-color: orange;            border: 20px solid #0000ff;            border-radius: 100px;            /*推荐使用%设置圆角半径，可以随着元素大小动态调整*/            border-radius: 50%;            /*border-radius: 120px;*/        }        .box:hover {            /* 鼠标悬浮时样式 */        }    </style></head><body><div class="box"></div><script type="text/javascript"></script></body></html>

效果图：

6.border旋转效果：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style type="text/css">        .box {            /* .box 默认样式 */            margin: 200px 0 0 200px;            width: 200px;            height: 200px;            /*background-color: orange;*/            /*border: 20px solid;*/            border-top: 20px solid orange;            border-right: 20px solid orange;            border-bottom: 20px solid #7e64ff;            border-left: 20px solid #7e64ff;            border-radius: 50%;        }        .box-txt{            width: 200px;            height: 200px;            line-height: 200px;            text-align: center;        }        .box:hover{            transform: rotate(360deg);            transition: 5s;        }        .box:hover .box-txt{//使文字逆时针旋转保持文字不动            transform: rotate(-360deg);            transition: 5s;        }    </style></head><body><div class="box">    <div class="box-txt">Hello</div></div><script type="text/javascript"></script></body></html>

效果图如下：

0 0