CSS3新增(1)(css3新增了哪些特性)

yumo6666小时前技术文章3

圆角边框:

在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了

border-radius属性用于设置元素的外边框圆角。

语法:

border-radius: length;

盒子阴影:

CSS3中新增了盒子阴影,我们可以使用box-shadow属性为盒子添加阴影。

语法:

box-shadow: h-shadow v-shadow blur spread color inset;

说明

h-shadow

必需的。水平阴影的位置。允许负值

v-shadow

必需的。垂直阴影的位置。允许负值

blur

可选。模糊距离

spread

可选。阴影的大小

color

可选。阴影的颜色。在CSS颜色值

寻找颜色值的完整列表

inset

可选。从外层的阴影(开始时)改变阴影内侧阴影

文字阴影:

在CSS3中,我们可以使用text-shadow属性将阴影应用于文字

text-shadow: h-shawow v-shadow blur color;

描述

h-shadow

必需。水平阴影的位置。允许负值。

v-shadow

必需。垂直阴影的位置。允许负值。

blur

可选。模糊的距离。

color

可选。阴影的颜色。参阅 CSS 颜色值

详情可参考

https://www.runoob.com/ 菜鸟教程

https://www.w3school.com.cn/ w3c

相关文章

前端切图css高级阴影用法drop-shadow

切图网专注于html5前端切图开发,下面给大家介绍一下前端切图css高级阴影用法drop-shadow,主要是在最近项目切图中遇到的,通常我们了解的css的阴影写法就是shadow,但是它不能解决非规...

css 设置盒子阴影,阴影和背景图保持一致

预览图首先查看预览图:原理采用了 background 属性 background: inherit;inherit 关键字使得元素获取其父元素的计算值。它可以应用于任何 CSS 属性,包括 CSS...

手机UI设计新技巧:弥漫阴影效果(ui设计手机模板)

你知道2016年最火的最流行的扁平化设计新技巧是什么吗? 最近在UI设计界大热的一个词,还有APP UI设计师专门出了一个教程的新技巧。最近各位设计师朋友,在网上经常看到的一种特别萌、特别可爱的UI作...

微软上线Babylon.js 8.0:打造更真实阴影与照明效果

IT之家 3 月 28 日消息,继上周发布 DirectX Ray Tracing(DXR)1.2 后,微软最新推出开源 3D 引擎 Babylon.js 8.0。该版本历经一年开发,新增基于图像的照...

每天一个CSS小技巧 - 不规则投影(ps不规则物体的投影怎么画)

当我们想给一个矩形或者其他能用border-radius生成的形状加投影时,box-shadow的表现都很棒的。但是,当元素添加可一些伪元素或半透明的装饰之后,border-radius会无视这些。这...

Css3中text-shadow属性使用方法及各参数所代表的含义

在CSS3中我们可以使用text-shadow属性给页面上的文字添加阴影效果,text-shadow在CSS2.1的时候曾被删除过的一个属性,但是又在css3.0中恢复了使用。①text-shadow...