CSS笔记(9)

CSS笔记(9)

圆角边框(重点)

语法:

border-radius : length

采用的是半径(圆的半径)原理:(椭)圆与边框的交集形成圆角效果.

如果想要一个圆形的盒子,那么只要把圆角半径的长度(length)设置为盒子(正方形)的长的一半即可.

CSS部分:
    .box2 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            line-height: 100px;
            text-align: center;
            margin: 100px auto;
            border-radius: 51px;
 HTML部分:
     <div class="box2">123</div>
            

效果图:

1. 参数值可以为数值或者百分比的形式
2. 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度一半即可,或者直接写为50%
3. 如果是个矩形,设置为宽度的一半就可以做

1. 该属性是一个简写属性,可以跟四个值,分别代表左上角,右上角,右下角,左下角,只写两个值代表的分别是(左上+右下),(右上+左下).
2. 分开写: border-top-left-radius......以此类推,但是top和left的顺序不能变.

盒子阴影

CSS3中新增了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影.

我放了一个盒子,尝试了一下.阴影的颜色最好用rgba来写,可以调整透明度,否则阴影会显得非常生硬.

div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
            box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
        }

注意:阴影是不占用页面空间的.

文字阴影:

在CSS3中,我们可以使用text-shadow来添加文字阴影效果.

视频进度:(169/541)