css3 圆形文字-CSS-绘制矩形和圆环的背景效果解读（附件：绘制矩形图片）

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

有时我们需要在页面上勾勒出一些方形的元素css3 圆形文字，这可以通过CSS轻松实现。 原理是只要将元素每条边的border-radius增加到50%css3 圆形文字，就可以得到任意大小的圆。 下面的例子演示了这一点。

1. 渲染

以下是黑色正方形、渐变色矩形、环形、圆形图片的效果：

2. 示例代码

  
    
    
    
      #circle1 {
      	border-radius: 50%;
      	width: 160px;
      	height: 160px;
        display: inline-block;
        background: #2380be;
      }
      
      #circle2 {
        border-radius: 50%;
      	width: 160px;
      	height: 160px;
        display: inline-block;
        background: radial-gradient(circle at 60% 40%, white, #2380be);
        background: -ms-radial-gradient(circle at 60% 40%, white, #2380be);
        background: -webkit-radial-gradient(circle at 60% 40%, white, #2380be);
        background: -moz-radial-gradient(circle at 60% 40%, white, #2380be);
      }
      
      #circle3 {
        border-radius: 50%;
        width: 140px;
        height: 140px;
        display: inline-block;
        border: 10px solid #2380be;
      }
      
      #circle4 {
        border-radius: 50%;
        width: 160px;
        height: 160px;
        display: inline-block;
        overflow: hidden;
      }
    
  
  
    
    

    
    

    
    

    
    

      
    
  

附：旋转正方形图片

(1)在实现正方形图片的基础上，我们可以在其上添加另一种动画风格，使图片可以向上旋转。

(2)示例代码如下：

  
    
    
      
      #circle4 {
        border-radius: 50%;
        width: 160px;
        height: 160px;
        display: inline-block;
        overflow: hidden;
        -webkit-animation: spin 3s linear infinite;
        -moz-animation: spin 3s infinite linear;
        -o-animation: spin 3s infinite linear;
        animation: spin 3s linear infinite;
      }
      
      @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
      }
      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }