如何实现让CSS边框发光的高亮效果

html-css026

如何实现让CSS边框发光的高亮效果,第1张

div{width: 200pxheight: 200pxbackground: #dadadaborder:5px solid redanimation: shine 1s alternate infinite}

@keyframes shine{

from{border-color: rgba(0,0,0,0)}

to{border-color: rgba(0,0,0,1)}

}

.xx{  box-shadow: 0 0 15px #4E4E4E padding:10px }

这两个0是  左右  上下。用px调整。如果是0就是居中。

15px是你要光圈。越大就范围就越广。类似于病毒扩散那种感觉.padding可无视，是为了放你class一个span或button自己就撑开了

如下。

在css中，让边角具有弧度只需要用border-radius这个属性。

写法像这样：border-radius:25px

测试代码如下:

div{

width:200px

height:130px

background-color:wheat

margin-bottom:10px

}

CSS3是CSS（层叠样式表）技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

CSS演进的一个主要变化就是W3C决定将CSS3分成一系列模块。浏览器厂商按CSS节奏快速创新，因此通过采用模块方法，CSS3规范里的元素能以不同速度向前发展，因为不同的浏览器厂商只支持给定特性。但不同浏览器在不同时问支持不同特性，这也让跨浏览器开发变得复杂。