当前位置: 十堰网站建设制作 > 新闻动态 > 公司新闻 >

东郡教你怎么在网站建设中用css样式画各种图形

发表日期:2016-05-25 18:26 文章编辑:东郡网络 浏览次数:172 标签: 网站建设, 网站图形制作,


在我们建设网站过程中,为了达到美观的效果,网站设计中往往会有各种几何形状,以吸引客户的眼球,如果我们不想用图片表现,那么可以使用css样式来写,这样一些简单的图形就可以表现出来。下面,东郡小编就和大家一起来探讨一下怎样利用css样式来画各种图形。
 
一、给方形加圆角,这个是比较常用到的

{ width: 300px; height: 198px; background: #f00; border-radius: 5px; }
 
 
二、长方形、正方形、圆形、梯形



.Square { width: 300px; height: 300px; background: #669; }/*正方形*/
.rectangle { width: 300px; height: 200px; background: #669; }/*长方形*/
.circle{ width: 400px; height: 400px; background: #669; border-radius: 100px;}/*圆形*/
.trapezoid { border-bottom: 200px solid #669; border-left:100px solid transparent; border-right:100px solid transparent; height: 0; width: 200px; }/*梯形*/
 
 
三、圆形、空心圆、上半圆、下半圆


 
.circle { width: 200px; height: 200px; background: #669; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; }/*圆形*/
.circle-circle { width: 300px; height: 300px; border:20px solid #669;background: #fff; -moz-border-radius: 150px; -webkit-border-radius: 150px; border-radius: 150px; }/*空心圆*/
.circle-up { width: 200px; height: 0px;border:0 solid transparent;border-top:200pxsolid #669;border-right:200px solid #669;  -moz-border-radius: 200px 200px 0 0; -webkit-border-radius: 200px 200px 0 0; border-radius: 200px 200px 0 0; }/*上半圆*/
.circle-down { width: 200px ; height: 0px;border:0 solid transparent;border-bottom:200px  solid #669;border-right:200px solid #669;  -moz-border-radius:0 0 200px  200px ; -webkit-border-radius:0 0 200px 200px ; border-radius:0 0 200px 200px ; }/*下半圆*/
 
四、心形
 


.heart{width:160px;height:200px;position:relative}
.heart:before{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:#669;-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);-webkit-transform: rotate(-45deg);

position:absolute;left:20px;}
.heart:after{content:" ";border: 0 solid transparent; -moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px 100px 0 0;width:80px;
height:120px;background:#669;-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg);
position:absolute;left:48px;top:0px;}
 
 
当然这种在网站建设中,用css样式写图形的方法还有很多,一些简单的图形可以用css样式,但是一些复杂的图形最好就用图片展示了,要不然样式就多而复杂了。
如没特殊注明,文章均为东郡网络原创,转载请注明来自:http://www.dongsem.com/xinwen/gongsixinwen/2016/0525/271.html
  • 项目展示

    项目展示

  • 网站建设

    网站建设

  • 微信营销

    微信营销

  • 电商平台

    电商平台

  • 软件APP开发

    软件APP开发

0719-8658685/8659650

地址:十堰市上海路大美盛城II期梧桐花园4栋2单元25楼

400-071-9581

地址:襄阳市樊城区现代城3幢1202室

电话:0719-8658685/8659650

地址:十堰市上海路大美盛城.香榭丽小区2单元701

Copyright © 2018 东郡网络 All Rights Reserved