zoukankan      html  css  js  c++  java
  • CSS3之Border-radius

    1、属性介绍

          border-radius:none|12.3px,取值不可为负数,表示边框圆角

          相关属性:border-top-right-radius , 

                            border-bottom-right-radius , 

                            border-bottom-left-radius ,

                            border-top-left-radius


    2、版本兼容性

    (1)IE不兼容

    (2)火狐2.0不兼容

    (3)Opera 9.64不兼容

    (4)Chrome 1.0.x和2.0.x兼容


    3、属性实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS3之Border-radius</title>
    <style type="text/css">
        body{
    		50%;
    		height:100%;
    		font-size:14px;
    	}
        div{
    		100%;
    		height:100px;
    		text-align:center;
    		vertical-align:middle;
    		alignment-adjust:after-edge;
    		alignment-baseline:after-edge;
    		font-family:Tahoma, Geneva, sans-serif;
    		
    		border-style:solid;
    		border-thick;
    		
    		-moz-border-radius:12px;
    		-webkit-border-radius:20px;
    		
    		-moz-border-radius-bottomleft:12px;
    		-webkit-border-bottom-left-radius:12px;
    		
    		-moz-border-radius-bottomright:12px;
    		-webkit-border-bottom-right-radius:12px;
    		
    		-moz-border-radius-topleft:12px;
    		-webkit-border-top-left-radius:12px;
    		
    		-moz-border-radius-topright:12px;
    		-webkit-border-top-right-radius:12px;
    	}
    </style>
    </head>
    
    <body>
       <div>
          设置边框四方向的圆角
       </div>
    
    </body>
    </html>
    

    4、浏览器运行结果


  • 相关阅读:
    Hadoop伪分布式环境安装
    记一次Xshell配置ssh免密登录时的问题
    HDFS学习笔记二
    HDFS学习笔记一
    十万级百万级数据量的Excel文件导入并写入数据库
    javascript内置对象:Date
    内置对象:Math
    javascript内置对象一:String
    javascript内置对象一: Array数组
    Javascritp 数据结构和二叉树算法
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315374.html
Copyright © 2011-2022 走看看