CSS3渐变色

小秋同学 11-17 16:15:49 学习园地
摘要: 一、背景色渐变123456.box{width: 300px;height: 300px;     background: -webkit-linear-gradient摘要: 一、背景色渐变123456.box{width: 300px;height: 300px;     background: -webkit-linear-gradient

一、背景色渐变

CSS" width="686">
1
2
3
4
5
6
.box{width300px;height300px;
     background: -webkit-linear-gradient(rightred blue); /* Safari 5.1 - 6.0 */
     background: -o-linear-gradient(rightredblue); /* Opera 11.1 - 12.0 */
     background: -moz-linear-gradient(rightredblue); /* Firefox 3.6 - 15 */
     background: linear-gradient(rightred blue); /* 标准的语法(必须放在最后) */
 }

色值还可以可以用

1
background:linear-gradient(to left,rgba(232,0,0,0.310%,rgba(0,51,204,0.630%,rgba(0,51,204,1100%)

二、字体渐变色

1
2
3
4
5
.box{width300px;height300px;font-size100px;
            background-image: -webkit-linear-gradient(bottomrgb(000), rgb(255255255));
            -webkit-background-clip: text;
            -webkit-text-fill-colortransparent;
        }

三、镂空字体

1
2
3
4
  input::-webkit-input-placeholder { colorred; }/* WebKit browsers */
  input:-moz-placeholder {  colorred; }/* Mozilla Firefox 4 to 18 */
  input::-moz-placeholder { colorred; }/* Mozilla Firefox 19+ */
  input:-ms-input-placeholder {  colorred; }/* Internet Explorer 10+ */

五、给图片加上内阴影

1
2
3
4
5
6
7
8
9
10
11
.demo{
            -webkit-box-shadow:inset 0 0 30px #FF1493;
            -moz-box-shadow:inset 0 0 30px #FF1493;
            box-shadow:inset 0 0 30px #FF1493;
            display:inline-block;
        }
.demo img{
            position:relative;
            z-index:-1;
            displayblock;
        }



原贴: https://www.tbadc.com/coding/541.html

文章版权及转载声明:

编辑:小秋同学本文地址:https://www.qiuhai.com/study/857.html发布于 11-17 16:15:49
文章转载或复制请以超链接形式并注明出处学习吧_一个不错的学习网站
本站文章如没有特殊说明,均采集网上收集,若要转载请务必注明出处,尊重他人劳动成果共创和谐网络环境。 声明:某些文章来源于网络,所采集的到信息本站只为传递信息和分享,不做任何双方证明,也不承担任何法律责任。 文章内容若侵犯你的权益,请联系本站客服删除!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享
加入收藏

发表评论
加载中~