• 从零开始学习前端开发 — 16、CSS3圆角与阴影


    一、css3圆角: border-radius:数值+单位;

    1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等)

    2.设置两个值

    border-radius:50px 5px; 左上,右下为50px,右上,左下为5px

    3.设置三个值

    border-radius:10px 50px 20px; 左上为10px,右上,左下为50px,右下20px

    4.设置四个值

    border-radius:0px 10px 30px 50px;

    顺时针方向依次为左上0,右上10,右下30,左下50

    5.用/来设置第二组值

    border-radius:50px/10px;

    第一组值代表水平半径为50px,第二组值代表垂直半径为10px

    6.还可以单独设置某一个方向的圆角

    border-top-left-radius 左上角

    border-top-right-radius 右上角

    border-bottom-right-radius 右下角

    border-bottom-left-radius 左下角

    7.设置为圆形

    border-radius:50%; (或 border-radius:100%;)


     

    二、图片边框

    1.设置图像边框的路径

    border-image-source:url(图片路径);

    2.设置图像边框的裁剪位置

    border-image-slice:数值;

    注:默认中间部分不显示,如果需要显示,添加fill

    eg: border-image-slice:27 fill; (设置数值,专指像素)

    3.设置图像边框的平铺属性

    border-image-repeat:stretch|repeat|round;

    stretch 默认值,图像会被拉伸

    repeat 图片平铺,碰到边界时会被截断

    round 图片平铺,碰到边界会动态调整图片的大小,直至铺满整个容器

    eg: border-image-repeat:round stretch;

    指水平方向铺满,垂直方向拉伸


     

    三、文本阴影: text-shadow:x轴偏移量 y轴偏移量 模糊度 颜色值;

    eg: text-shadow:3px 3px 5px black,5px 5px 8px gray,10px 10px 8px red;

    注:x轴偏移量向右为正,向左为负

    y轴偏移量向下为正,向上为负

    模糊度默认值为0,值越大,模糊度越大,不允许设置负值

     


     

    四、盒阴影: box-shadow:x轴偏移量 y轴偏移量 模糊度 扩展半径 颜色值;

    eg: box-shadow:5px 5px 3px gray,8px 8px 3px #333;

    eg: box-shadow:5px 5px 3px black inset;

    注:盒阴影分为内阴影和外阴影两种,默认为外阴影,当设置inset时,为内阴影

    eg: box-shadow:0 0 5px 10px gray;

    注:扩展半径可以为正值也可以为负值


     

    扩展:

    设置方向为右的三角:

    元素{
    0;
    height:0;
    border:30px solid transparent;
    border-left-color:blue;
    }

    设置文本描边:-webkit-text-stroke:3px blue;

  • 相关阅读:
    在CentOS 7.6上安装VNC Server
    CentOS7.6 安装Docker
    CentOS 7.6 安装 Weblogic 12
    CentOS 7.6 安装Oracle 12c
    Spring MVC 使用介绍(五)—— 注解式控制器(一):基本介绍
    Spring MVC 使用介绍(四)—— 拦截器
    Spring MVC 使用介绍(三)—— Controller接口控制器
    Spring MVC 使用介绍(二)—— DispatcherServlet
    Spring MVC 使用介绍(一)—— 概述
    Spring 使用介绍(十三)—— Bean的生命周期
  • 原文地址:https://www.cnblogs.com/witkeydu/p/8271324.html
Copyright © 2020-2023  润新知