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

文章目录

一、前言
二、原理介绍
- 2.1 盒子阴影 box-shadow
三、拓展阅读

一、前言

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

其中，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 可以写在参数的第一个或最后一个，其它位置是无效的。

三、拓展阅读

《网站开发进阶专栏》

网站开发进阶(七十）：CSS 实现圆角有立体感的 DIV 边框相关推荐

div css 立体效果,定义CSS样式圆角有立体感的DIV边框
圆角边框 #sash_left { width:430px; float:left; } #sash_left ul { text-align:left; vertical-align:middle; ...
网站开发进阶(四十九)由JS报“未结束的字符串常量”引发的思考
一.报错在做公司项目开发过程中,后期生产环境上报JS出现"未结束的字符串常量"错,如下: 后期经过不断调试,发现是由于Js引擎在解析带有换行字符串时引起的异常.解析后的js代码类 ...
网站开发进阶(二十六)js刷新页面方法大全
一.前言在项目开发过程中,需要实现刷新页面.经过学习,发现下面这条语句就可以轻松实现. location.reload(); // 刷新页面有关刷新页面的其它方法,具体学习内容如下,有需要的朋友 ...
网站开发进阶(二十九)HTML特殊转义字符
HTML特殊转义字符参考文献 http://tool.oschina.net/commons?type=2 美文美图
网站开发进阶(三十二)HTML5之FileReader的使用
一.前言 HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使 ...
html5边框有圆弧,CSS圆角有立体感的DIV边框
圆角边框 #sash_left { width:430px; float:left; } #sash_left ul { text-align:left; vertical-align:middle; ...
html 边框立体效果,CSS圆角有立体感的DIV边框
圆角边框 #sash_left { width:430px; float:left; } #sash_left ul { text-align:left; vertical-align:middle; ...
跨平台应用开发进阶(四十六)webview方式嵌套H5应用加载慢解决方案
文章目录一.前言二.优化建议三.实施方案 3.1 优化项目结构,减小项目组包体积 3.2 去除项目冗余字体文件 3.2.1 字体筛选 3.2.2 字体压缩 3.3 gzip压缩 3.4 ETag ...
跨平台应用开发进阶(三十)：uni-app 实现集成火山视频直播服务
文章目录一.前言二.技术实现 2.1 web-view组件在app中的窗体关系和plus.webview操作方式三.双向通信 3.1 uni-app与内嵌网页通信 3.2 内嵌网页向uni-ap ...