zoukankan      html  css  js  c++  java

  • css用边框实现圆角矩形

     今天要做一个圆角矩形的按钮，于是直接找圆角矩形的css实现方式，搞了半天，虽然也实现效果了，但是很复杂，需要用很多代码，后来突然想到以前做过的一个边框效果，也是圆角矩形，于是找了出来，发现这种办法相当简单并且效果一点也不差，这里简要分享一下。

          关键部分都有注释。

    [html] view plaincopy
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
    2. <html>  
    3.  <head>  
    4. <title>div+CSS圆角矩形</title>  
    5.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
    6. <style type="text/CSS">  
    7. .roundedRectangle{  
    8.     height: 70px;   
    9.      100px;  
    10.     margin-top: 100px;  
    11.     background: #9BD1FA;//背景色  
    12.     border- 10px; //边缘的宽度，如果要分别设置可以这样：border- 15px 5px 15px 5px;依次为上、右、下、左  
    13.     border-style: solid;  
    14.     border-radius: 15px;    //圆角的大小  
    15.     border-color: #000 #000 #000 #000;  //边框颜色，依次为上、右、下、左  
    16. }  
    17.   
    18. .roundedRectangle p{  
    19.     margin: 0px auto;  
    20.     padding: 20px;  
    21.   
    22.     text-align:center;  
    23.     font-size: 20px;  
    24.     letter-spacing:8px;  
    25. }  
    26.   
    27.   
    28. </style>  
    29. </head>  
    30. <body>  
    31.   
    32. <div class="roundedRectangle">  
    33.     <p>heihei</p>  
    34. </div>  
    35. </body>  
    36. </html>  
         css的边框还有很多样式，还可以改变边框的属性来实现其他的效果，详情请看：http://www.w3school.com.cn/css/css_border.asp

    版权声明：本文为博主原创文章，未经博主允许不得转载。
  • 相关阅读:
    Linux下配置免密登录！
    centos7主机名的修改
    centos7和centos6区别
    Log4j的配置文件
    Java读取配置文件的几种方法
    关于WEB-INF目录下无法访问webapp下的css等静态文件
    metasploit 渗透测试笔记(meterpreter篇)
    metasploit 渗透测试笔记(基础篇)
    metasploit渗透测试笔记(内网渗透篇)
    自学PHP有哪些书籍和教程值得推荐？
  • 原文地址：https://www.cnblogs.com/shipeng22022/p/4614081.html
Copyright © 2011-2022 走看看