CSS入门基础知识（十二）——圆角边框和盒子阴影

CSS标签入门基础知识

圆角边框和盒子阴影

圆角边框

在CSS3中，新增了圆角边框的样式，盒子可以变成圆角了。

boder-radius属性用于设置元素的外边框圆角
语法：

radius半径原理：（椭）圆与边框的交际形成圆角效果

例子：

注意：
1、参数值可以为数值也可以为百分比形式
2、如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写50%
3、如果是矩形，设置为高度的一半
4、该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

盒子阴影

css3中新增了盒子阴影，可以使用box-shadow属性为盒子添加阴影。

语法：

例子：

注意：
1、默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效
2、盒子阴影不占用空间，不会影响其他盒子的排列

文字阴影（了解即可）

在css3中 可以使用text-shadow属性将阴影应用于文本。

语法：

（ps：引自pink老师~，刚刚开始作为自己的学习笔记写，如有不好请见谅，阿里嘎多）

参考学习链接。[^1]

[^1]：https://www.bilibili.com/video/BV14J4114768?p=1