把html中按钮设置为圆形很简单，只需要将按钮的border-radius属性设置50%，同时将宽和高设置相同即可并去除边框线。具体实现代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="button" value="按钮" style="width: 50pxheight: 50pxborder-radius: 50%border: none">
</body>
</html>
运行效果如图
扩展资料：
HTML的特点
1、简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。
2、可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。
3、平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。
4、通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
参考资料：百度百科——HTML
12
css代码
/#circle { background-color: rgba(0,0,0,0) border:5px solid rgba(10,10,10,0.9) opacity:.9border-right:5px solid rgba(0,0,0,0)border-left:5px solid rgba(0,0,0,0) border-radius:50pxbox-shadow: 0 0 35px #808080 z-index:1000 width:50pxheight:50px margin:0 auto position:fixedleft:30px bottom:30px -moz-animation:spinPulse 1s infinite ease-in-out -webkit-animation:spinPulse 1s infinite ease-in-out-o-animation:spinPulse 1s infinite ease-in-out -ms-animation:spinPulse 1s infinite ease-in-out}#circle1 { background-color: rgba(0,0,0,0) border:5px solid rgba(20,20,20,0.9) opacity:.9border-left:5px solid rgba(0,0,0,0) border-right:5px solid rgba(0,0,0,0)border-radius:50pxbox-shadow: 0 0 15px #202020 z-index:1000 width:30pxheight:30px margin:0 autoposition:fixedleft:40px bottom:40px -moz-animation:spinoffPulse 1s infinite linear -webkit-animation:spinoffPulse 1s infinite linear -o-animation:spinoffPulse 1s infinite linear -ms-animation:spinoffPulse 1s infinite linear}@-moz-keyframes spinPulse { 0% { -moz-transform:rotate(160deg)opacity:0box-shadow:0 0 1px #505050} 50% { -moz-transform:rotate(145deg)opacity:1} 100% { -moz-transform:rotate(-320deg)opacity:0}}@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg)} 100% { -moz-transform:rotate(360deg) }}@-webkit-keyframes spinPulse { 0% { -webkit-transform:rotate(160deg)opacity:0box-shadow:0 0 1px #505050} 50% { -webkit-transform:rotate(145deg)opacity:1} 100% { -webkit-transform:rotate(-320deg)opacity:0}}@-webkit-keyframes spinoffPulse { 0% { -webkit-transform:rotate(0deg)} 100% { -webkit-transform:rotate(360deg)}}@-o-keyframes spinPulse { 0% { -o-transform:rotate(160deg)opacity:0box-shadow:0 0 1px #505050} 50% { -o-transform:rotate(145deg)opacity:1} 100% { -o-transform:rotate(-320deg)opacity:0}}@-o-keyframes spinoffPulse {0% { -o-transform:rotate(0deg)}100% { -o-transform:rotate(360deg)}}@-ms-keyframes spinPulse { 0% { -ms-transform:rotate(160deg)opacity:0box-shadow:0 0 1px #505050} 50% { -ms-transform:rotate(145deg)opacity:1} 100% { -ms-transform:rotate(-320deg)opacity:0}}@-ms-keyframes spinoffPulse { 0% { -ms-transform:rotate(0deg)} 100% { -ms-transform:rotate(360deg)}}
1
<div id="circle"></div><div id="circle1"></div>
1
2
3
4
5
6
<script>
jQuery(window).load(function() {
jQuery("#circle").fadeOut(500)
jQuery("#circle1").fadeOut(700)
})
</script>
<div style="width:100pxheight:100pxborder:1px solid redborder-radius:50pxline-height:100pxtext-align:centercolor:red">设计师
</div>
要做一个圆圈，首先要做一个正方形的div，然后加上border边框，边框要用border-radius圆角，当圆角像素等于div长宽的一半时，就变成了一个圆形边框
中间的文字用line-height和text-align上下左右居中
还有那个箭头应该是图片来的，可以当背景图片插入，这个我就不写了
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）