css3中的圆角border-radius
原创
©著作权归作者所有:来自51CTO博客作者朦胧淡月的原创作品,请联系作者获取转载授权,否则将追究法律责任
css3的属性应该加上浏览器前缀
不同的浏览器内核不同,因此css的前缀不同。
常见的几种浏览器内核
火狐浏览器 Geoko内核 前缀是 -mox-
谷歌浏览器, Webkit内核 前缀是 -wekbit-
IE浏览器 Trident内核 前缀是 -ms-
opera浏览器 Presto内核 前缀是 -o-
文字描边
<style>
* {
padding: 0;
margin: 0;
}
div {
font-size: 50px;
/* 颜色是无色,描边成为淡红色 */
-webkit-text-stroke: 1px #f00;
color: transparent;
}
</style>
<div>好好学习</div>

圆角圆角的完整格式
<style>
div {
width: 200px;
height: 200px;
border: 1px solid blue;
/* 圆角的完整格式:斜线的左边表示的是水平位置4个值; 斜线的右边表示的是垂直位置4个值 */
/* 分别表示的是顶部水平左上角,顶部水平右上角, 底部水平的右上角, 底部的水平左上角 / 顶部垂直左上角,顶部垂直右上角, 底部垂直的右上角, 底部的垂直左上角 */
border-radius: 10px 30px 40px 50px / 10px 30px 40px 50px;
}
</style>
<body>
<div>雪月剑仙-李寒衣</div>
</body>

圆角 border-radius 4个参数
<style>
div {
width: 200px;
height: 200px;
border: 1px solid blue;
/* 左上角水平和垂直,右上角水平和垂直,右下角水平和垂直, 左下角水平和垂直*/
border-radius: 10px 20px 30px 40px;
}
</style>
<body>
<div>雪月剑仙-李寒衣</div>
</body>
圆角 border-radius 2个参数
div {
width: 200px;
height: 200px;
border: 1px solid blue;
/* 左上角和右下角的水平和垂直, 右上角和左下角的水平和垂直 */
border-radius: 10px 20px;
}
圆角 border-radius 1个参数
div {
width: 200px;
height: 200px;
border: 1px solid blue;
/* 4个角的水平和垂直都是10px */
border-radius: 10px ;
}
border-radius: 0px;表示的没有圆角哈。
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识