Web前端入门十八圆角边框和盒子阴影
总目录:https://blog.csdn.net/treesorshining/article/details/124725459
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 | 可选,阴影的颜色。 |
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgeibff
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01