Web前端入门(十八)圆角边框及盒子阴影
总目录:https://blog.csdn.net/treesorshining/article/details/124725459
文章目录
- 1.圆角边框
- 2.盒子阴影
- 2.1 开发中阴影常用语句
- 2.2 文字阴影
1.圆角边框
- 在 CSS3 中,新增了圆角边框样式,这样盒子就可以变圆角了。
- border-radius 属性用于设置元素的外边框圆角。
border-radius: length;
radius
半径(圆的半径) 原理:(椭)圆与边框的交集形成圆角效果
- 参数值可以是数值或百分比的形式
- 如果是正方形盒子,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为50%
- 如果是一个矩形,设置为高度的一半就可以(圆角矩形效果)
- 该属性是一个简写属性,可以跟四个值,分别代表左上角,右上角,右下角,左下角
border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
2.盒子阴影
CSS3 中新增了盒子阴影,可以使用 box-shadow 属性为盒子添加阴影。
box-shadow: h-shadow v-shadow blur spread color inset;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置,允许负值。阴影正值往右移动,负值往左移动。 |
v-shadow | 必需。垂直阴影的位置,允许负值。阴影正值往下移动,负值往上移动。 |
blur | 可选。模糊距离。即影子的虚实程度,0则是纯实的影子,值越大影子越模糊。 |
spread | 可选,阴影的尺寸。即影子的大小。 |
color | 可选,阴影的颜色。一般用rgba完成半透明的效果。 |
inset | 可选,将外部阴影(outset)改为内部阴影 |
- 模糊距离:影子的虚实
- 阴影尺寸:影子的大小
注意:
- 默认的是外阴影(outset),但是不可以在后面写这个单词,否则导致阴影无效
- 盒子阴影不占用空间,不会影响其他盒子排列
2.1 开发中阴影常用语句
原先盒子没有影子,当鼠标经过盒子就添加阴影效果
div:hover {box-shadow:10px 10px 10px -4px rgba(0,0,0,.3);
}
2.2 文字阴影
在 CSS3 中,可以使用 text-shadow 属性将阴影应用于文本。
text-shadow: h-shadow v-shadow blur color
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置,允许负值 |
v-shadow | 必需。垂直阴影的位置,允许负值 |
blur | 可选。模糊距离 |
color | 可选,阴影的颜色。 |
Web前端入门(十八)圆角边框及盒子阴影相关推荐
- css第4天笔记-圆角边框;盒子阴影;文字阴影;浮动;PS切图
学习内容:圆角边框:盒子阴影:文字阴影:浮动:PS切图 一.其他样式 1.圆角边框 在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了. border-radius 属性用于设置元素的 ...
- CSS圆角边框、盒子阴影及文字阴影详解
文章目录 1. 圆角边框 2. 盒子阴影 3. 文字阴影 1. 圆角边框 在CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了. border-radius 属性用于设置元素的外边框圆角. ...
- 前端笔记(5)盒子模型,边框,内外边距,盒子模型布局,ps基本操作,列表样式,圆角边框,盒子阴影
css样式表/层叠样式表(3) (1)盒子模型 (2)盒子边框 (3)表格的细线边框 (4)内边距padding 内盒尺寸计算(元素实际大小) padding不会影响盒子大小的情况 (5)外边距mar ...
- 0基础快速入门CSS技术栈(5)—图解详细阐述说透CSS的盒子模型(超级重要)、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心(附详细案例源码解析过程)2021.01.07更新
文章目录 1. 盒子模型(CSS重点) 1.1 看透网页布局的本质 1.2 盒子模型(Box Model) 1.3 盒子边框(border) 1.3.1 边框综合设置 1.3.2 example01 ...
- CSS盒子模型(border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例)
1. 网页布局的本质 首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步 就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
- CSS圆角边框、盒子阴影、文字阴影(01-07课)
01.综合案例-快报模块布局分析 1.大盒子div 2.分2个小盒子(上盒子为标题h,下盒子为列表(无序列表)) 02.03.04.综合案例-快报制作 1.头部制作 2.快报模块列表制作 代码: &l ...
- ps基本操作以及盒子综合案例、圆角边框、盒子阴影、文字阴影
网页美工大部分效果图都是利用ps做的,以后切图工作在ps完成. 综合案例 图片不超出box(和父亲一样宽): 标签都是有语义的,标题要用h4,合理的地方用合理的标签. 每个盒子都取类名比较方便找到,利 ...
- CSS圆角边框和盒子阴影
圆角边框 1.圆形 语法 border-radius:length; 方法:让一个正方形变成圆圈 div {width: 200px;height: 200px;background-color: p ...
- CSS的盒子模型、圆角边框、盒子阴影、文字阴影及ps操作
目录 一.盒子模型 (一)边框 border 1.基本写法 2.分开写 3.表格细线边框 border-collapse 4.border与盒子大小 (二)内边距 padding 1.基本写法 2.分 ...
最新文章
- 室内+室外激光SLAM关键算法、代码和实战剖析正式开课(cartographer+LOAM+ LIO-SAM)
- opensuse 安装java_OpenSUSE Leap 42.3 安装java(Oracle jre)
- 从采样到结果报告,未来的核酸检测要实现「无人化」
- oracle和arcgis优势,Oracle spatial 使用的一些感受
- 24.Interpreter-解释器模式
- 向左向右向后转python,将图像(png和jpg)转换为多维列表并在python中向后转换
- LeetCode 快乐数(Happy Number)
- DPKG命令与软件安装、APT
- beego1---beego,bee环境配置
- python写excel标记文字颜色_python3使用xlwt时写入文档字体颜色和边框样式
- php 按照laravel5.5,Laravel5.5 综合使用
- linux下RocketMQ的安装和API调用中出现的问题的解决 MARK一下
- echo 单引号和双引号
- 小米路由pro php,完全拆解小米路由器Pro:无接口,预加硬盘无望
- fatal: unsafe repository is owned by someone else 的解决方法
- 析因设计知识点重点讲解
- 关于Android应用开发的一些安全注意事项
- Unity3D 制作调色板
- Jetpack Compose(一):Text
- 二进制数代码进制转换