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、浏览器运行结果


  • 相关阅读:
    Java-数组
    排序-冒泡排序
    排序-选择排序
    Java-基础
    Java-Html-session
    Java-API
    Tomcat-常用设置
    Tomcat目录结构
    TOMCAT-安装配置
    Java-public
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315374.html
Copyright © 2011-2022 走看看