本文摘自PHP中文网,作者V,侵删。
先来看一下效果图:
(相关视频教程推荐:css视频教程)
CSS代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!doctype html>
<html>
<head>
<meta charset= "UTF-8" >
<title>棒棒糖</title>
<h 3 >用css画一个棒棒糖</h 3 >
<p>要求:</p>
<p> 1: 棒棒糖中间文字为水平居中</p>
<p> 2: 不得少于三层颜色</p>
<style>
.round{
width : 100px ;
height : 100px ;
background-color : #e5e7e9 ;
position : relative ;
text-align : center ;
margin : 100px ;
font : italic bold 17px / 100px arial , sans-serif ;
box-shadow:
0 0 0 10px #4286b4 ,
0 0 0 20px #fc052e ,
0 0 0 30px #FBDD00 ,
0 0 0 40px #00BDFB ;
border-radius: 200px ;
color : #ffffff ;
}
.bangbang{
width : 20px ;
height : 150px ;
margin : -80px 0px 0px 142px ;
background-color : #00BDFB ;
border-radius: 10px ;
}
</style>
</head>
<body>
<div>
hello world!
</div>
<div></div>
</body>
</html>
|
推荐教程:css快速入门
以上就是如何使用css来画一个棒棒糖的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css怎么去掉输入框的边框
css中有哪些常见的布局方式
什么是css预处理器
css如何让文字水平排列
css文件中引用图片不显示怎么办
css justify-content属性怎么用
如何使用css修改选择框样式
怎么防止别人下载网页css
如何利用css改变浏览器滚动条样式
css 什么是相对长度单位
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何使用css来画一个棒棒糖