前言：
当前小伙伴们对“css3作用”大约比较关心，我们都想要剖析一些“css3作用”的相关文章。那么小编同时在网摘上搜集了一些关于“css3作用””的相关内容，希望我们能喜欢，看官们一起来了解一下吧！#头条创作挑战赛#
CSS3新特性：圆角边框、盒子阴影、文字阴影
圆角边框
圆角边框：可以使盒子的边角形成圆弧。
语法：
border-radius：数值或百分比;
圆弧的半径值越大，圆角弧度越大。半径值越小，圆角弧度越小。
当盒子为正方形时，圆弧半径为边长的一半，则盒子会变成圆形。
div { background-color: antiquewhite; text-align: center; width: 300px; }.bR { height: 300px; /* 圆角边框 */ border-radius: 150px; border-radius: 50%; line-height: 300px; }<h3>圆形的做法</h3><div class="bR" >正方形：半径等于边长的一半。</div>
圆形示意图
当圆弧半径等于盒子高度的一半则可以形成圆角矩形。
div { background-color: antiquewhite; text-align: center; width: 300px; height: 150px; }.bRb { border-radius: 75px; line-height: 150px; }<h3>圆角矩形的做法</h3><div class="bRb">矩形：半径等于盒子高度的一半</div>
圆角矩形示意图
属性值个数不同：
一个数值：四个角的圆弧角度相同。
两个数值：第一个值是左上角和右下角相同弧度，第二个值是右上角和左下角相同弧度。
三个数值：顺时针方向，第一个值是左上角的弧度，第二个值是右上角和左下角相同弧度，第三个值是右下角弧度。
四个数值：顺时针方向，左上角、右上角、右下角、左下角。
div { background-color: antiquewhite; text-align: center; width: 300px; height: 150px; }p { padding-top: 50px; }.bTwo { height: 150px; border-radius: 20px 75px; }.bThree { border-radius: 30px 75px 5px; }.bAlong { height: 150px; border-radius: 75px 10px 50px 20px; }<div class="bTwo"> <p> 设置两个角：对角关系。<br> 第一个值是左上角和右下角的弧度<br> 第二个值是右上角和左下角的弧度 </p></div><div class="bThree"> <p> 设置三个角：顺时针排序。<br> 第一个值是左上角的弧度<br> 第二个值是右上角和左下角的弧度<br> 第三个值是右下角的弧度。 </p></div>
<div class="bAlong"> <p> 四个角语法排列按照顺时针顺序：<br>左上角、右上角、右下角、左下角 </p></div>
单独设置一个角度的属性关键词：
border-top-left-radius：左上角弧度；
border-top-right-radius:右上角弧度；
border-bottom-right：右下角弧度；
border-bottom-left-radius：左下角弧度。
关键词写法顺序：先上下再左右。
div { background-color: antiquewhite; text-align: center; width: 300px; height: 150px; }p { padding-top: 50px; }.bOne { border-top-right-radius: 30px; }<div class="bOne"> <p> 单独设置一个角的弧度。<br> 关键词写法：先上下再左右。<br> border-top-right-radius </p> </div>盒子阴影
语法：
box-shadow：h-shadow v-shadow blur spread color Inset；
属性值介绍：
h-shadow：水平阴影位置，x轴正值代表阴影在盒子的右侧，负值代表阴影在盒子的左侧；
v-shadow：垂直阴影位置，y轴正值代表阴影在盒子的下侧，负值代表阴影在盒子的上侧；
blur：阴影模糊距离；
spread：阴影尺寸大小；
color：阴影颜色；
Inset：内部阴影，默认状态是外部阴影，该属性值可以使阴影存在于盒子内部。
注：阴影不占用盒子空间。
* { margin: 0 auto; padding: 0; }div { width: 300px; height: 300px; background-color: antiquewhite; margin-top: 50px; }.bZ { /* box-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色 内部阴影*/ box-shadow: 10px 10px 10px 10px black; }.bF { /* box-shadow:水平阴影位置 垂直阴影位置 模糊距离 阴影尺寸 阴影颜色 内部阴影*/ box-shadow: -10px -10px 10px 10px black; }<div class="bZ">正值</div><div class="bF">负值</div>文字阴影
语法：
text-shadow：h-shadow v-shadow blur color；
属性值介绍：
h-shadow：水平阴影位置，x轴正值代表阴影在盒子的右侧，负值代表阴影在盒子的左侧；
v-shadow：垂直阴影位置，y轴正值代表阴影在盒子的下侧，负值代表阴影在盒子的上侧；
blur：阴影模糊距离；
color：阴影颜色。
* { margin: 0 auto; padding: 0; }div { width: 300px; height: 300px; background-color: aqua; /* 盒子外边距30px */ margin-top: 30px; /* 文字水平垂直居中 */ text-align: center; line-height: 300px; }.bZ { /* 文字阴影：水平阴影位置 垂直阴影位置 模糊距离 阴影颜色 */ text-shadow: 10px 10px 5px black; }.bF { /* 文字阴影：水平阴影位置 垂直阴影位置 模糊距离 阴影颜色 */ text-shadow: -10px -10px 5px black; }<div class="bZ">正值</div><div class="bF">负值</div>
明天学习浮动定位，拜~
标签： #css3作用
