网站开发进阶(七十):CSS 实现圆角有立体感的 DIV 边框

举报
SHQ5785 发表于 2022/02/18 19:29:54 2022/02/18
【摘要】 一、前言网站开发过程中,若页面整体背景为白色,其中的页签元素若使用普通的样式,整个页面看上去就会比较呆板、平面化。可以考虑应用圆角、阴影效果增加页面活力。其中,CSS3定义了两种阴影:盒子阴影和文本阴影。其中盒子阴影需要IE9及以上版本,而文本阴影需要IE10及以上版本。下面介绍box-shadow盒子阴影的使用:对最底下div元素设置样式如下:<style scoped> .wrappe...

一、前言

网站开发过程中,若页面整体背景为白色,其中的页签元素若使用普通的样式,整个页面看上去就会比较呆板、平面化。可以考虑应用圆角、阴影效果增加页面活力。

其中,CSS3定义了两种阴影:盒子阴影文本阴影。其中盒子阴影需要IE9及以上版本,而文本阴影需要IE10及以上版本。下面介绍box-shadow盒子阴影的使用:

对最底下div元素设置样式如下:

<style scoped>
	.wrapperClass {
		background: url(../../../static/appCenter/bg@2x.png) no-repeat center center fixed ;
		background-size: cover;
		box-sizing: border-box;
	}
</style>

二、原理介绍

2.1 盒子阴影 box-shadow

box-shadow属性向box添加一个或多个阴影。

语法:

box-shadow: offset-x offset-y blur spread color inset;

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];

数值从左至右:阴影水平偏移值(正值向右,负值向左);阴影垂直偏移值(正值向下,负值向上);阴影模糊值;阴影扩散值;阴影颜色;投影方式。

参数解释:

  • offset-x:必需,取值正负都可。offset-x水平阴影的位置。
  • offset-y:必需,取值正负都可。offset-y垂直阴影的位置。
  • blur:可选,只能取正值。blur-radius阴影模糊半径,0即无模糊效果,值越大阴影边缘越模糊。
  • spread:可选,取值正负都可。spread代表阴影的周长向四周扩展的尺寸,正值,阴影扩大,负值阴影缩小。
  • color:可选。阴影的颜色。如果不设置,浏览器会取默认颜色,通常是黑色,但各浏览器默认颜色有差异,建议不要省略。可以是rgb(250,0,0),也可以是有透明值的rgba(250,0,0,0.5)
  • inset:可选。关键字,将外部投影(默认outset)改为内部投影。inset 阴影在背景之上,内容之下。

注意⚠️:inset 可以写在参数的第一个或最后一个,其它位置是无效的。

三、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。