CSS3 渐变边框，按钮样式、设计图标、电子优惠券 详解！

1.定义渐变边框

实例设计：

本例使用 backgroun-imag 属性提供渐变边框，定义渐变边框，效果如下：

代码：

2.定义渐变填充色

本例通过 conten 属性 为 div class=wys 标签嵌入一个通过渐变设计的圆球同时为这个包含框设计一个渐变背景，从而产生一种透视框的效果如图：

代码：

3.设计透气棉背景

本例使用四个 径向渐变 叠加 为网页设计此背景

代码如下：

4.定义渐变项目符号

实例设计：

本例通过 list-style-image 属性，为ul 元素定义自定义图标，该图标通过渐变特效进行绘制，从何产生一种精致的二色效果，演示如下：

代码：

5.设计按钮样式1

本例使用 CSS3 线性渐变设计动态按钮效果，定义当按钮被激活或者光标经过时，实现动态响应。

设计按钮样式2

本例设计了一个按钮在正常状态下带有边框的渐变和阴影，当光标经过时会显示较暗的渐变背景效果，当按下光标时会反转渐变背景，并显示1个像素的下沉效果，按钮字体颜色会加深。演示如下：

代码如下：

设计按钮样式3

本例综合 渐变 阴影 圆角 等功能 设计一组3d 动态效果按钮样式，效果如下

由连接显示：https://blog.csdn.net/weixin_44793212/article/details/102977680

建议在书写过程中，能注释注释，写完一小节看效果。

小编光排错排了半小时🤦‍

设计图标

本例使用 radial-gradient（）函数定义径向渐变，使用box-shadow添加阴影，radial-greadient设计环形径向渐变高亮效果，效果如下

设计电子优惠卷

本例使用径向渐变设计一个电子优惠卷如下

代码

代码链接：https://blog.csdn.net/weixin_44793212/article/details/102988323

完结！

作者：在校生记录博客！