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;表示的没有圆角哈。