黑马程序员前端-CSS之圆角边框盒子阴影文字阴影

Posted 2022-03-16 黑马程序员官方

前端学习笔记教程不定期更新中，传送门：

• 前端HTML第一天：什么是网页？什么是HTML？网页怎么形成？
• 黑马程序员前端-CSS入门总结
• 黑马程序员前端-CSS之emmet语法
• 黑马程序员前端-CSS的复合选择器
• 黑马程序员前端-CSS的显示模式
• 黑马程序员前端-CSS背景
• 黑马程序员前端-CSS三大特性：叠层性、继承性、优先级
• 黑马程序员前端–CSS盒子模型以及PS基础

上一期的CSS入门笔记没有更新完，继续更新中…
今天继续学习，CSS之圆角边框、盒子阴影、文字阴影CSS盒子模型以及PS基础。
下面开始继续更新内容，前面链接大家用来查漏补缺哦。

一、圆角边框

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

border-radius 属性用于设置元素的外边框圆角。

语法：

 border-radius:length; 

- 参数值可以为数值或百分比的形式

- 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%

- 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

- 分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius

- 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用

二、盒子阴影

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

语法：

 box-shadow: h-shadow v-shadow blur spread color inset; 

三、文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。

语法：

 text-shadow: h-shadow v-shadow blur color;

---

  2022年前端学习路线图：课程、源码、笔记，技术栈
欢迎小伙伴们留言哦，期待看到大家的进步。另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我。