#头条创作挑战赛#

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>

明天学习浮动定位，拜~