边框、圆角和阴影

最新推荐文章于 2024-08-25 04:02:20 发布

馒头@Mm

最新推荐文章于 2024-08-25 04:02:20 发布

阅读量571

点赞数 1

分类专栏：前端笔记文章标签：前端 html css

本文链接：https://blog.csdn.net/yan626413/article/details/125899824

版权

前端笔记专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS中关于边框的style、width和color属性，展示了如何创建不同类型的边框效果。此外，还探讨了border-radius属性，从单值到四值的设置方式，实现各种圆角效果。最后，讲解了如何使用box-shadow和text-shadow来添加盒子和文本阴影，包括阴影的方向、模糊度和颜色等参数设定。通过实例，帮助读者深入理解并掌握这些CSS技巧。

摘要由CSDN通过智能技术生成

边框

border:边框

属性	属性值	描述
border-style	none	定义无边框
	solid	定义实线
	double	定义双实线
	dashed	定义虚线
	dotted	定义点状线
	groove	定义3D凹槽效果
	ridge	定义3D隆起效果
border-width		边框粗细默认是3px
border-color		边框的颜色默认黑色（2D）或灰色（3D）

圆角

1 . border-radius：圆角

一个值	分别代表四个角的圆角
两个值	分别代表左上角和右下角、右上角和左下角
三个值	分别代表左上角、右上角和左下角、右下角
四个值	分别代表左上角、右上角、右下角、左下角

2 . 单角设置：

border-top-left-radius: 20px;

border-top-right-radius: 30px;

border-bottom-left-radius: 40px;

border-bottom-right-radius: 50px;

阴影

1 . 盒子阴影：box-shadow

值：inset：内阴影，可选。取值相反

第一个值	阴影距离盒子的左右距离，正值往右，负值往左，0盒子正下方
第二个值	阴影距离盒子的上下距离，正值往下，负值往上，0盒子正下方
第三个值	阴影的清晰度(值不能为负)，阴影值越大会以渐变的形式呈椭圆形往外扩散
第四个值	阴影的颜色

注意：可以一个元素同时添加多个阴影，值之间以逗号隔开

2 . 文本阴影：text-shadow

值：

第一个值	阴影距离文本的左右距离，正值往右，负值往左，0文本正下方。
第二个值	阴影距离文本的上下距离，正值往下，负值往上，0文本正下方。
第三个值	阴影的清晰度(值不能为负)，阴影值越大会以渐变的形式呈椭圆形往外扩散。
第四个值	阴影的颜色；

注意：可以一个元素同时添加多个阴影，值之间以逗号隔开。