CSS学习（六）-css圆角边框高级效果、边框阴影效果（上）

来源：互联网发布：云计算的分类编辑：程序博客网时间：2024/05/03 06:40

一、理论：
1.border-radius:
a.表格应用圆角:表格必须使用border-collapse属性为separate，表格圆角才能正常显示
b.圆形:元素的宽度和高度相同，圆角的半径值50%(或高度的一半)
c.半圆:元素的宽度与圆角方位配合一致，以不同的高度比例等项即可制作半圆
d.扇形:元素的宽度、高度、半径值相同，根据圆角位置不同可制作不同的扇形
e.椭圆:需要设置圆角的水平和垂直方向的半径值
2.border-shadow:
a.none: 无阴影
b.inset: 区分内外阴影
c.x-offset:阴影水平偏移量
d.y-offset:阴影垂直偏移量
e.blur-radius:阴影模糊半径
f.color:颜色

二、实践：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        .div1{            width: 50px;            height: 50px;            background-color: #239285;            margin: 30px;        }        .div2{            width:100px;            height: 50px;            background-color: #239587;            border-radius: 50px 50px 0 0;        }        .div3{            width: 50px;            height: 100px;            background-color: #231587;            border-radius: 0 50px 50px 0;        }        .div4{            width: 100px;            height: 50px;            background-color: #219587;            border-radius: 0 0 50px 50px;        }        .div5{            width: 50px;            height: 100px;            background-color: #239597;            border-radius: 50px 0 0 50px;        }    </style></head><body><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div><div class="div5"></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        .div1{            width: 100px;            height: 100px;            background-color: #239285;            margin: 30px;        }        .div2{            width: 100px;            height: 100px;            background-color: #239587;            border-radius:100px 0 0 0;        }        .div3{            width: 100px;            height: 100px;            background-color: #231587;            border-radius: 0 100px 0 0;        }        .div4{            width: 100px;            height: 100px;            background-color: #219587;            border-radius: 0 0 100px 0;        }        .div5{            width: 100px;            height: 100px;            background-color: #239597;            border-radius: 0 0 0 100px;        }    </style></head><body><div class="div1"></div><div class="div2"></div><div class="div3"></div><div class="div4"></div><div class="div5"></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        .div1{            background-color: cyan;            margin:30px;            height: 300px;        }        .div2{            width: 100px;            height: 50px;            background-color: #239587;            border-radius: 100px / 50px;        }        .div3{            width: 50px;            height: 100px;            background-color: #231587;            border-radius: 50px /100px;        }    </style></head><body><div class="div1">    <div class="div2"></div>    <div class="div3"></div></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">       .box-shadow{           width: 200px;           height: 100px;           border-radius: 5px;           border: 1px solid #ccc;           margin: 20px;       }        .top{            box-shadow:0 -2px 0 #202189;        }        .right{            box-shadow: 2px 0 0 #203893;        }        .bottom{            box-shadow: 0 2px 0 #832982;        }        .left{            box-shadow: -2px 0 0 #235662;        }    </style></head><body><div class="box-shadow top"></div><div class="box-shadow right"></div><div class="box-shadow bottom"></div><div class="box-shadow left"></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        .box-shadow1{            width: 200px;            height: 100px;            border-radius: 10px;            border:1px solid #aeaeae;            margin: 20px;            box-shadow: 0 0 10px #189356;        }        .box-shadow2{            width: 200px;            height: 100px;            border-radius: 10px;            border:1px solid #aeaeae;            margin: 20px;            box-shadow: 0 0 10px 10px #289356;        }        .box-shadow3{            width: 200px;            height: 100px;            border-radius: 10px;            border:1px solid #aeaeae;            margin: 20px;            box-shadow: 0 0 10px -10px #285356;        }    </style></head><body><div class="box-shadow1"></div><div class="box-shadow2"></div><div class="box-shadow3"></div></body></html>

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        .box{            width: 200px;            height: 100px;            text-align: center;            line-height: 100px;            float: left;            margin: 30px;        }        .border{            border:10px solid #291153;        }        .box-shadow{            box-shadow: 0 0 10px #283966;        }    </style></head><body>    <div class="box border">border</div>    <div class="box box-shadow">box-shadow</div></body></html>

0 0