zoukankan      html  css  js  c++  java
  • 如何在html中做圆角矩形和 只有右边的"分隔线"

    这个网站满好的,可以常看看

    css-matic中有几个很好的写css可视化的工具

    其实做css 版式布局等都可以有工具的 推荐40个优秀的免费CSS工具

    debugger正则表达式在线

    其实是对(理论上是对所有的)html元素: 而实际 常用的是 div块, 链接a 等运用圆角矩形的样式

    这个圆角是通过元素: div, a的 css 样式来实现的:

    样式: border-radius/ border-top-left-radius左上/..../可以分别设置不同的, 也可以是一样的

    radius是半径, 如果radius等于div 边长的一半, 就是圆

    一般: 先设置整体的border,然后再设置border-radius:

    border: 1px solid #ccc(这个是经典的边框灰)
    border-radius: 5-10px;

    css3-matic上,还对 ff和chrome做了特别说明:

    border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;   //ff和chrome, 在样式名称前面分别加上: -moz-(内核是Gecko), -webkit-
    -webkit-border-radius: 5px 5px 5px 5px;
    border: 0px solid #000000;
    
    
    

    而只有右边的"分隔线",是通过div的 border样式来实现的, 只写 右边的border样式就可以了: border-right: 1px solid #ccc

    border-radius是css3 中的样式属性!

    现代浏览器ff,chrome和ie9+以上版本的都支持 border-radius:

    在 CSS2 中添加圆角矩形需要技巧。我们必须为每个圆角使用不同的图片。
    在 CSS3 中,创建圆角是非常容易的。

    在 CSS3 中,border-radius 属性用于创建圆角:
    div
    {
    border:2px solid;
    border-radius:25px;
    -moz-border-radius:25px; /* Old Firefox */
    }

    -moz代表firefox浏览器私有属性
    -ms代表IE浏览器私有属性
    -webkit代表chrome、safari私有属性
    -o-表示opera
    这些都是css3里面的

    以-webkit开头的Webkit浏览器特有扩展样式
    与以-moz开头的Firefox特有扩展样式相同,以-webkit开头的样式是 Webkit浏览器特有的,只有Webkit浏览器可以解析。
    比如,在Webkit浏览器中可以用 -webkit-border-radius实现圆角。

  • 相关阅读:
    SQL补充
    SQL练习题
    HDU 2907
    Codeforces 814D
    Codeforces 814C
    Codeforces 1004D
    Codeforces 1004E
    CodeForces 909F
    CodeForces 909E
    CodeForces 909D
  • 原文地址:https://www.cnblogs.com/bkylee/p/5410401.html
Copyright © 2011-2022 走看看