zoukankan      html  css  js  c++  java
  • 使用css3进行增强

      使用css3进行增强

    1,为元素创建圆角

    border-radius:25px;

    .about img{
    
        border: 5px solid #bebebe;
        float: left;
        margin-right: 5px;
        border-radius: 10px;
    }

    border-radius的属性值也和margin,padding,border 一样可以有1

    ~4个,其代表的上下左右也是一样的。

    border-top-left-radius:r;(左上,同理可以分别创建四个不同的圆角)

    2,为文本添加阴影

    1 h1
    2 {
    3 text-shadow: 5px 5px 5px #FF0000;
    4 }
    5px 5px 5px #FF0000;  分别代表水平偏移量,垂直偏移量,模糊半径(必须是正整数),颜色

    可对文本添加多重阴影:text-shadow: 5px 5px 5px #FF0000,2px 8px 56x #fff;


    改回默认值:text-shadow: none;
    text-shadow属性是继承的。

    3,为元素添加阴影
    box-shadow:inset;spread;(有两个属性可以选择)
    box-shadow可以接受六个值:水平偏移量,垂直偏移量,模糊半径(必须是正整数)(可选)inset(可选,创建内阴影),spread(可选,创建外阴影),颜色
    也可以多重阴影,和文本多重阴影类似。
    改回默认值和文本阴影类似。

    box-shadow属性是不继承的。

    4,应用多重背景
    为单个元素应用多重背景:
    background-color:b,
    background-imge:u, (u为图形引用的相对或据对URL)
    background-position:p,(p是成对的x-offset和y-offset 可正可负)
    background-repeat:r;(repeat-x,
    repeat-y,no-repeat,用逗号隔开,分别对应imge中的u的每个url

    5,使用渐变背景
    background:silcer;
    background:linear-gradient(to right,silver,black);(从左往右,从银色到黑色。top right,bottom right。可以从四面八方变过来)
    a、创建备用背景色:background:color;
    b、定义线性渐变:background:linear-gradient(to top.....(等多方位都可以变化),角度值,颜色);
    c、定义径向变化:background:radial-gradient(变换形状,渐变尺寸,size(如果只有一个值,不能用分数),变换位置,指定颜色);
    6,为元素设置不透明度
    oparity:0;(0表示元素的不透明度,一般为两位小数,不带单位)

    使用sprite拼合图像
     
     









  • 相关阅读:
    windows基础应用(word)
    Spring-处理自动装配的歧义性
    Spring-Condition设置
    Spring-profile设置
    Spring-导入和混合配置
    Spring-装配Bean
    jQuery-理解事件
    Oracle-批量修改语句及相关知识点
    Oracle中的不等于号
    JavaScript-事件冒泡简介及应用
  • 原文地址:https://www.cnblogs.com/lal-fighting/p/5078772.html
Copyright © 2011-2022 走看看