首页 > 编程知识 正文

css3按钮阴影,css3底部阴影

时间:2023-05-04 20:50:03 阅读:107790 作者:3932

研究box-shadow和gradient的初衷,

其实只是为了让分页hr好看一点。

这就是geek们的想法,

为了在一点小事上做出大动作

不达到目的就不放弃。 () ) _ () ) )。

好吧,先取得最终效果,直接在正文中插入hr后:

这需要在主题CSS中添加有关hr的代码。

hr {border:none; 边距- bottom :20 px; height:10px; width:80%;

-webkit-border-radius: 5px; -Moz-Border-Radius3360500px; border-radius: 5px;

ack ground : URL (data : image/SVG XML; 基本64, PD94bWwgdmVyc2lvbj0iMS4wIiA/pgo 8c3 znihhtbg5zpsjodhrwoi8VD 3d3lnczlm 9yz y8 ymdawl3N2 zy I gd2 lk dgg9ijewmcuighlawdodd0imtawjsigdmld0jved0imcawidegmsigchjlc2vydmlc 2 zw50 iglkpsjncmfklxvjz2ctz2vuzxjhdgvkiibncmfkawvudfvuaxrzpsj 1c2vyu3BH y2 vpblvzzsigede 9i jalib5mt0imcuiihgypsj 1c2vyu3BH y2 vpblvblvblvzzzzzszse sj2 ogicagphn0B3 a gb2 zm C2 v0psiwjsigc 3r VCC 1j B2 xvc j0 iizflntc5o SIG C3 RV cc1 vcgfjaxr5psi XII8CIA GICA 8c3 rvcbvcbvzzzxq9ijewmcuihn0B3 aty 29 wmcuihn0B3 aty 29 3bh y2 l0et0imcivpgogidwvbgluzwfyr3jhzgllbnqciagphjly 3q ged0I MCI gd2 lk dgg9ijeiighlawdodd0imsigzmlskskd0idxjskskskskbd

background 3360-moz-linear-gradient (left,rgba (30,87,153,1 )0%,rgba ) 125,185,232,0 ) 100% );

background 3360-WebKit-gradient (linear,left top,right top,color-stop(0%,rgba ) 30、87、153和1 ) )、color

background 3360-WebKit-linear-gradient (left、rgba (30、87、153、1 )、rgba ) 125、185、232、0、100 ) );

background 3360-o-linear-gradient (left,rgba ) 30、87、153、1 )0%,rgba ) 125、185、232、0 ) 100% );

background 3360-ms-linear-gradient (left,rgba ) 30、87、153、1 )0%,rgba ) 125、185、232、0 ) 100% );

background 3360线性梯度(left,rgba (30,87,153,1 )0%,rgba (125,185,232,0 ) 100% );

filter : progid : dximagetransform.Microsoft.gradient (startcolorstr=' # 1e 5799 ',endColorstr='#007db9e8',)

看看这堆玩艺儿吧。

第一行是简单和基本的显示控制

第二行是现在常见的无国界效果。

从第三行开始是复杂的渐变效果。

由于Ultimate CSS Gradient Generator的帮助,

我们可以快速制作各种类型的渐变效果。

应该注意的是,透明效果必须用RGBA的颜色编码。

常用的HEX达不到。

在考虑最终效果时,

“图层阴影”(box-shadow )是另一种选择。

用div模拟的效果如下所示。

CSS代码如下所示。 其中,第二种行为与box-shadow相关。

div # boxshadowtest { width :100 %; height: 10px; border:1px solid; 边距- bottom :20 px;

- web kit-box-shadow 33605 px 5px 5px # 193 c74; - moz-box-shadow :5 px5px 5px # 193 c74; box-shadow : 5px 5px 5px # 193 c74; }

比起渐变,

图层阴影的应用范围明显更广。

代码更简单。

同时,利用css3生成器提供的工具,

理想的代码也很容易写。

我不会提到具体的代码分析,

CSS3的定义相当直观,

当然还有很多方便工具的辅助。

本文的主题图是CSS3中分界线和阴影的分布、模糊的图像。

是一目了然的小工具。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。