• CSS3之圆角边框,盒子阴影,文字阴影


    CSS3的一些新属性(ie9 及以上版本的浏览器支持)

    圆角边框 , 盒子阴影 , 文字阴影

    (1)圆角边框

    border-radius :  length;   // length可以是一个数值,如10px,50px,   也可以是一个百分比,数值越大,那么圆角边框的弧度越明显

    典型示例1: 做出一个圆形的盒子     条件:1 这个盒子首先必须是一个正方形   2 length = 盒子宽度的一半( 50% )

     典型示例2:做一个圆角矩形   条件: length = 盒子高度的一般即可

     

    (2)盒子阴影

    box-show:  水平阴影的位置    垂直阴影的位置   模糊距离   阴影 的尺寸  阴影的颜色   inset

    水平阴影的位置 : 必填   例如: 10px  往右移动10px       -10px: 往左移动10px

    垂直阴影的位置: 必填     例如      10px  往下移动10px    -10 px   往上移动10px

    模糊距离:0 是实的,数值越大,如100px,越模糊

     

    阴影的尺寸: 数值越大,阴影越大

     阴影的颜色:这个没什么可讲的,你总不能整个红色的阴影吧

     

     最后一个参数 inset:表示内阴影,如果你不写这个参数 则表示默认的外阴影(一般也不会使用到inset这个参数)

     最后最重要的一点 ,盒子阴影是不占用空间的,即不会影响到其他的盒子,所以放心使用吧

    (3)文字阴影 

    text-shadow :  水平阴影的位置  垂直阴影的位置 模糊距离   颜色

    参数和盒子阴影的使用方法是一致的。

  • 相关阅读:
    Java中断机制
    RPC原理
    synchronized和ReentrantLock的区别
    dubbo入门
    Zookeeper入门
    分布式事务
    Mysql索引会失效的几种情况
    java代码执行过慢的问题定位
    持续集成
    Mycat 数据库分库分表中间件
  • 原文地址:https://www.cnblogs.com/zysfx/p/12761129.html
Copyright © 2020-2023  润新知