13518219792
div style="width:100px; height:100px; border-radius:50%; overflow:hidden;"
创新互联公司专注于龙井网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供龙井营销型网站建设，龙井网站制作、龙井网页设计、龙井网站官网定制、微信小程序服务，打造龙井网络公司原创品牌,更为您提供龙井网站排名全网营销落地服务。
img src=""
/div
需要浏览器支持CSS 3 ，注意div的宽高要一样，也可以直接把样式添加在img上，但不建议那样
css3的圆角样式
border-radius就可以做到了，
圆形，就把四个角都设置成宽高的一半，就是50%，或者是固定值，，
注意的是，如果你是直接用Img标签的话，那你的Img
宽高要一样，就是说要是正方形，
如果你是通过容器来实现的话，你就直接把容器设置成正方形，border-radius:50%;然后再background图片就可以了。
-moz-border-radius: 5px 5px;
firefox的
IE的本身没有
说白就是用图片做背景比较实际
用CSS代码设定按钮的圆角样式，这个在css3中才能实现，通过使用border-radius来实现这个效果，不过有浏览器的兼容性问题，-moz(例如 -moz-border-radius)用于Firefox；-webkit(例如：-webkit-border-radius)用于Safari和Chrome；border-radius:5px 15px 20px 25px;它的意思就是上的圆角5px，右的圆角15px，下的圆角20px，左的圆角25px，通过例子来实际看下：
div id="round"/div
#round {
padding:10px; width:300px; height:50px;
border: 5px solid #dedede;
-moz-border-radius: 15px; /* Gecko browsers */
-webkit-border-radius: 15px; /* Webkit browsers */
border-radius:15px; /* W3C syntax */
}
效果如图：
这个样式是浏览器根据系统主题默认的,CSS改不了,另外还有一点很重要,就是国际惯例,单选钮就是圆形的,复选是正方形,擅自更改会给浏览者制造不必要的麻烦,降低网站可用性,这是个忌讳.
要实现样式替换的话,可以用JS监听点击行为,然后替换不同的图片或样式.
1、用css画一个圆形
.disc1{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:300px 0px 0px 300px;
border-radius:100%;
float:left;
}
2、由于爱心是由两个圆和一个正方形组成的，所以还需要再来一个圆形
.disc2{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:250px 0px 0px 0px;
border-radius:100%;
float:left;
position: relative;
right: 50px;
}
3、心型下方就需要做一个正方形
.square{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin: 300px 0px 0px 0px;
float: left;
position: relative;
right: 152px;
}
4、做完这些的效果已经基本上出来了，但是还需要调整一下爱心的角度，这时就需要用到css样式中的transform中的rotate属性了。
由于需要把三个div都旋转角度，所以把这三个div放在一个div里面。具体代码如下：
.main{
transform: rotate(45deg);
margin: 300px;
}
全部代码如下
!DOCTYPE html
html
head
meta charset="utf-8" /
title/title
style type="text/css"
*{
margin: 0px;
padding: 0px;
}
.main{
transform: rotate(45deg);
margin: 300px;
}
.disc1{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:300px 0px 0px 300px;
border-radius:100%;
float:left;
}
.disc2{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin:250px 0px 0px 0px;
border-radius:100%;
float:left;
position: relative;
right: 50px;
}
.square{
width: 100px;
height: 100px;
border:1px solid red;
background-color: red;
margin: 300px 0px 0px 0px;
float: left;
position: relative;
right: 152px;
}
/style
/head
body
div class="main"
div class="disc1"/div
div class="disc2"/div
div class="square"/div
/div
/body
/html
