zoukankan      html  css  js  c++  java
  • CSS3的常用属性(二)

    边框

    边框圆角

    border-radius: 100px 每个角可以设置两个值,x和y

    补充: 可分别设置长,短半径,以“/”进行分隔,遵循顺时针的顺序,“/”之前为横轴半径,“/”之后为纵轴半径,如: border-radius: 10px 10px 10px 10px/ 20px 20px 20px 20px

    边框阴影

    box-shadow: 10px 5px 13px #fff

    • 第一个值为水平偏移量,正值向右,负值向左
    • 第二个值为垂直偏移量,正值向下,负值向上
    • 第三个值为模糊度,不能为负值
    • 第四个值为阴影颜色
      补充:可以设置多个边框阴影,inset可以设置内阴影 如:box-shadow: inset 5px 10px 20px #f52,inset 8px 15px 10px #fff

    边框图片

    border-image: url(“路径”) 20px 20px round  简写属性

    border-image-source: url(“路径”)  设置边框图片的地址

    border-image-slice: 20 20  图像边框的向内偏移

    border-image-width: 20px  指定边框的宽度

    border-image-repeat: repeat平铺 / round铺满 / stretch拉伸

    补充: round会自动调整尺寸,完整显示边框图片,而repeat单纯平铺多余的部分,会被剪裁,不能完整显示

    渐变

    线性渐变

    linear-gradient: 线性渐变指沿着直线朝一个方向产生渐变效果

    background:linear-gradient

    to right,  表示方向(如left,right,top,bottom,也可以使用度数,如20deg)

    #FFF,  渐变起始颜色

    #aaa,  渐变终止颜色

    );

    径向渐变

    radial-gradient: 径向渐变指从一个中心点沿着四周渐变

    background: radial-gradient

    100px at center,  表示围绕中心渐变。半径为100px,方向可以设置,如at left center,at 0px 0px

    #aaa,  渐变起始颜色

    #FFF,  渐变终止颜色

    注意: 中心点的位置参照的是盒子的左上角,辐射范围可以不等,即可以是椭圆

    );

    背景

    background-size: width,height  设置图片的宽度和高度 如:background-size: 100% auto

    补充: background-size: cover  自动调整缩放比例,保证图片始终填充满背景区域,如有溢出会被隐藏

        background-size: contain  自动调整缩放比例,保证图片始终完整显示在背景区域

    background-origin: 设置背景定位的起点,border-box以边框作为参考原点, padding-box以内边距作为参考原点,content-box以内容区作为参考原点

    background-clip: 设置背景区域clip(裁切),border-box裁切边框以内作为背景区域,padding-box裁切内边距以内作为背景区域,content-box裁切内容区作为背景区域

    过渡

    transition: one,two  one为要过渡的属性,two为过渡的时间

    transition-property: 设置过渡属性

    transition-duration: 设置过渡时间

    transition-timing-function: 设置控制速度linear(匀速),ease-in(加速)

    transition-delay: 设置过渡延时

    2D转换

    转换可以实现元素的位移,旋转,变形,缩放等,在css3中通过transform(变形)来实现2d或3d转换

    • scale(x,y): 可以对元素进行水平和垂直方向的缩放,x和y取值可为小数,但不能为负数 如 选择器:hover{ transform: scale(10,10);}
    • translate(x,y): 可以改变元素的位置 如 选择器:hover{ transform: translate(-10px,-20px);}
    • rotate(deg): 对元素进行旋转,正值为顺时针,负值为逆时针 如 选择器:hover{ transform: rotate(-200deg);}

    注意补充: 属性的作用对各个浏览器不一定有效,所以使用私有化前缀

    • -webkit-: 谷歌,苹果等
    • -moz-: 火狐
    • -ms-: IE
    • -o-: 欧朋
  • 相关阅读:
    Codeforces Round #494 (Div. 3) D. Coins and Queries (贪心,数学)
    Codeforces Round #645 (Div. 2) D. The Best Vacation (贪心,二分)
    Codeforces Round #481 (Div. 3) F. Mentors (模拟,排序)
    Codeforces Round #646 (Div. 2) B. Subsequence Hate (思维,前缀和)
    windows的类似shell 命令操作 风行天下
    Linux防火墙iptables的策略 风行天下
    HP服务器安装配置教程 风行天下
    zabbix 监控数据库 及 tcp连接数 风行天下
    Linux日志 风行天下
    CENTOS 挂载ntfs移动硬盘 风行天下
  • 原文地址:https://www.cnblogs.com/yushangzuiyue/p/8424575.html
Copyright © 2011-2022 走看看