zoukankan      html  css  js  c++  java
  • css3圆角边框,边框阴影

    border-radius向元素添加圆角边框,css3中的。IE9+ chrome safari5+ firefox4+ 现在都支持。可以向input div等设置边框。与border相似,可以四个角一起设置,也可以单独设置。

    语法:border-radius: 1-4 length|% / 1-4 length|%;

    -moz-border-radius:10px;支持旧的firefox

    -webkit-border-radius:10px;支持chrome

    按top-left, top-right, bottom-right, bottom-left顺序设置每个 radius 的值。如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。

     例子1:

      border-radius:2px;

      等价于:

      border-top-left-radius:2px;

      border-top-right-radius:2px;

      border-bottom-right-radius:2px;

      border-bottom-left-radius:2px;

     例子2:

      border-radius:2em 1em 4em / 0.5em 3em;

      等价于:

      border-top-left-radius:2em 0.5;

      border-top-right-radius:1em 3em;

      border-bottom-right-radius:4em 0.5em;

      border-bottom-left-radius:1em 3em;

    box-shadow向框添加一个或多个阴影。IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。

    语法:box-shadow: h-shadow v-shadow blur spread color inset;

    h-shadow,v-shadow必须。水平,垂直阴影的位置。允许赋值。blur可选,模糊距离。spread可选,阴影的尺寸。color可选,阴影的颜色。inset可选,将外部阴影(outset)改为内部阴影。

    例子:box-shadowinset 3px 3px 6px #ccc;

  • 相关阅读:
    广播BroadcastReceiver(2)
    hunnu11544:小明的烦恼——找字符串
    Systemd启动图形界面过程
    大数据.......
    2014百度之星第一题Energy Conversion
    基于zookeeper简单实现分布式锁
    LeetCode OJ 215. Kth Largest Element in an Array 堆排序求解
    Leetcode
    Linux文件系统(七)---系统调用之open操作(一)
    Go语言Slice操作.
  • 原文地址:https://www.cnblogs.com/js-html/p/3399612.html
Copyright © 2011-2022 走看看