当前第2页 返回上一页
button4:
1 2 3 4 | .button {
background-color : rgba( 0 , 63 , 255 , 1 );
box-shadow: 0 5px 20px rgba( 0 , 63 , 255 , . 5 );
}
|
效果如下:
button5:
基本外观是“button4”,box-shadow通过设置阴影来改变附着在下面的阴影的位置。
1 2 3 4 | .button {
background-color : rgba( 0 , 63 , 255 , 1 );
box-shadow: 0 0 40px rgba( 0 , 63 , 255 , . 7 );
}
|
效果如下:
button6:
这是我们添加到inset指定的“button4” 位置的box-shadow。
1 2 3 4 | .button {
background-color : rgba( 0 , 63 , 255 , 1 );
box-shadow: 0 5px 20px rgba( 0 , 63 , 255 , . 5 ), 0 0 40px rgba( 255 , 255 , 255 , . 5 ) inset ;
}
|
效果如下:
button7:
使用渐变的类型按钮,将不同颜色和调整角度的组合。
1 2 3 4 | .button {
background : linear-gradient( -45 deg, rgba( 87 , 225 , 181 , 1 ) 0% , rgba( 0 , 63 , 255 , 1 ) 100% );
box-shadow: 0 5px 20px rgba( 0 , 63 , 255 , . 5 );
}
|
效果如下:
以上就是本篇文章的全部内容,更多其他精彩内容可以参考php中文网的视频教程栏目中的CSS视频教程和CSS3视频教程栏目!!!
以上就是CSS实现发光的按钮效果(代码示例)的详细内容,更多文章请关注木庄网络博客!
返回前面的内容
相关阅读 >>
css 多种背景的使用场景和技巧以及好处
css如何设置背景图片的大小
css怎么放图片
css font-weight属性怎么用
css中resize属性有什么用
关于css中display:flex与inline-flex属性的详细介绍
怎么查看css文件
css怎么设置超链接文本为白色
css如何实现点击改变颜色
css实现一个简单的扁平化按钮
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » CSS实现发光的按钮效果(代码示例)