zoukankan      html  css  js  c++  java
  • 关于css制作圆角

    三个阶段:

    1.背景图片;

    2.css2.0+标签模拟圆角;

    3.css3.0圆角属性(border-radius).

    1.1.背景图片--宽度固定,高度自适应圆角

      为容器设置宽度

      在主体的上方加一个div,以上圆角为背景;在主体的下方加一个div,以下圆角为背景。

    1.2.背景图片--宽高自适应圆角

      容器设置了相对定位,左上、右上、左下、右下div定位在四个角上,以遮盖原来直角的原理形成圆角。

    2.css2.0+标签模拟圆角

      哦,我决定跳过了,直接css3好了。

    3.css3.0圆角属性(border-radius)

      给需要圆角的主体,设置border-radius属性,可用像素或者百分比为单位,数值代表圆角半径越大越弧。

      上左border-top-left-radius、上右border-top-right-radius、下右border-bottom-right-radius、下左border-bottom-left-radius

      border-radius:上左弧度 上右弧度 下右弧度 下左弧度;(顺时针)

      border-radius:上左和下右弧度 上右和下左弧度;(对角)

      单独不要弧度时设置为0,而不是none;

      -moz-兼容老的火狐    -ms-兼容老ie      -webkit-兼容Safari、Chrome

    比较:

      背景图片实现圆角是主流(2014年)

      css2.0增加很多无意义代码,实现效果不自然等

      css3代码少就可以实现效果,但是在ie8以下版本不支持,在移动端广泛运用,是趋势。

  • 相关阅读:
    []*T *[]T *[]*T 傻傻分不清楚
    Linux设备树
    gdb使用
    LockBit 2.0 勒索软件全球肆虐,我们该如何防范?
    记一次粗浅的钓鱼样本分析过程
    部分sql注入总结
    Linux系统取证简述
    对抗样本攻击及防御实战
    区块链是否真的安全?黑客盗取价值6亿美金数字货币
    某团购CMS的SQL注入漏洞代码审计
  • 原文地址:https://www.cnblogs.com/willYKYao/p/5954273.html
Copyright © 2011-2022 走看看