标签：圆角 盒子 4.2 阴影 10px shadow 边框 CSS

声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

1. H5C3+移动布局： 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩
2. JavaScript系列 ：JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）

文章目录

• • 1.圆角边框
  • 2.盒子阴影（重点）
  • 3. 文字阴影（了解）

---

1.圆角边框

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

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

border-radius: length;

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

• 参数值可以为数值（例如10px）也可以采用百分比的形式
• 设置圆形的方式：设置length为正方形盒子的边长的一半或者直接写成50%；
• 设置圆角矩形的方式：如果是个矩形，直接设置length为高度的一半
• 该属性是一个简写属性，可以跟1个，2个，3个和2个值，与边距的复合属性类似，都是按照顺时针方向，即左上角，右上角，右下角，左下角
• 也可以每个角都单独设置，例如只想要改一左上角，可以设置：boder-top-left-radius: 10px;

2.盒子阴影（重点）

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

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

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离(阴影的虚实)
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，将外部阴影（outset）改为内部阴影

• 默认的是外阴影(outset)，但是不可以写这个单词，否则会导致阴影无效；
• 盒子阴影不占用空间，不会影响其他盒子的排列；

原先盒子没有阴影，当鼠标经过时给盒子添加阴影：

div: hover {
    box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
}

3. 文字阴影（了解）

在CSS3中，可以使用text-shadow属性设置文字的阴影

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

值	描述
h-shadow	必需，水平阴影的位置，允许负值
v-shadow	必需，垂直阴影的位置，允许负值
blur	可选，模糊距离(阴影的虚实)
color	可选，阴影的颜色

标签：圆角,盒子,4.2,阴影,10px,shadow,边框,CSS
来源： https://blog.csdn.net/qq_42874319/article/details/116071864

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。