烟台网站建设外贸,长沙长沙网站建设,网页设计模板html代码dw,沈阳市浑南区城乡建设局网站随着网络的不断发展#xff0c;制作漂亮的 UI 是提高客户在网站上的参与度的最重要的工作之一。改善前端外观的方法之一是在 CSS 中应用渐变阴影。应用渐变阴影的两种最重要的方法是线性渐变和径向渐变。
渐变阴影可用于吸引用户对特定信息的注意力#xff0c;应用悬停或焦点…随着网络的不断发展制作漂亮的 UI 是提高客户在网站上的参与度的最重要的工作之一。改善前端外观的方法之一是在 CSS 中应用渐变阴影。应用渐变阴影的两种最重要的方法是线性渐变和径向渐变。
渐变阴影可用于吸引用户对特定信息的注意力应用悬停或焦点效果或为网站提供 Web3 外观和感觉。以下我们将通过实际示例来分析两种渐变阴影。
我们将利用两个重要的CSS概念来获得效果一个是filter属性另一个是::after伪类。伪类将用于创建假背景而过滤器属性将用于对周围背景应用模糊效果。
方法一线性渐变阴影
在此示例中我们将了解如何在卡片上应用线性渐变阴影效果。
语法
.classname::after{ background: linear-gradient(direction, color1, [color2, color3.......]);inset: -0.5rem;filter: blur(25px);.......
} 其中classname 是指分配给给定标签的类direction 属性表示颜色的线性排列应沿哪个方向排列。这可以以“deg”形式提供也可以使用预先设计的字符串例如“to right”。
算法
第一步创建网站的html文档骨架并为需要渐变效果的标签指定类名。
第 2 步使用 ::after 伪类其类名与分配给标记的类名相同。
第 3 步使用 Linear−gradient() CSS 函数用所需的渐变颜色填充伪类的背景。
第4步为了确保伪类永远不会叠加在原始类上请在伪类中添加 z−index 属性其值低于分配给原始类的值。
第5步给伪类添加一点inset属性使原始类不完全覆盖背景。
第6步最后应用渐变阴影效果对伪组件应用模糊。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleLinear Gradient Shadow/title
/head
bodydiv classgradienth1Welcome to Tutorials Point/h1/divstyle*{margin: 0px;padding: 0px;}.gradient{margin-top: 20px;margin-left: 5%;width: 90%;position: relative;border-radius: 10px;padding-top: 15px;padding-bottom: 15px;padding-right: 10px;padding-left: 10px;background-color: black;}h1{color: white;text-align: center;}.gradient::after{content: ;position: absolute;z-index: -100;background: linear-gradient(to right, blue, cyan,lime, green, yellow, orange, red);inset: -0.5rem;filter: blur(25px);}/style
/body
/html 方法二径向渐变阴影
在此示例中我们将了解如何将径向渐变阴影效果应用到相同的卡片效果并观察变化。
语法
.classname::after{ background: radial-gradient(color1, [color2, color3.......]);inset: -0.5rem;filter: blur(25px);.......
} 算法
第一步创建网站的html文档骨架并为需要渐变效果的标签指定类名。
第 2 步使用 ::after 伪类其类名与分配给标记的类名相同。
第 3 步使用 Radial−gradient() CSS 函数用所需的渐变颜色填充伪类的背景。
第4步为了确保伪类永远不会叠加在原始类上请在伪类中添加 z−index 属性其值低于分配给原始类的值。
第5步给伪类添加一点inset属性使原始类不完全覆盖背景。
第6步最后应用渐变阴影效果对伪组件应用模糊。
示例
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleRadial Gradient Shadow/title
/head
bodydiv classgradienth1Welcome to Tutorials Point/h1/divstyle*{margin: 0px;padding: 0px;}.gradient{margin-top: 20px;margin-left: 5%;width: 90%;position: relative;padding-top: 50px;padding-bottom: 50px;border-radius: 10px;padding-right: 10px;padding-left: 10px;background-color: black;}h1{color: white;text-align: center;}.gradient::after{content: ;position: absolute;z-index: -100;background: radial-gradient(yellow, red, blue);inset: -1rem;filter: blur(10px);}/style
/body
/html 总结
径向渐变颜色源自标签的中心从上面的例子可以看出黄色完全被黑色背景叠加而在卡片侧面的中点处发现了一些红色的痕迹。另一方面在线性渐变中没有观察到叠加因为它根据提供的方向沿所有边均匀分布所有颜色。
我们还可以调整 inset 和 Blur 的值来增加或减少渐变效果所覆盖的区域。负值越大渐变就越突出而模糊值则使效果在两侧更加分散。
