CSS3-使用边框和背景
CSS3-使用边框和背景
<!-- 使用边框样式 --> <!-- border-width 设置边框宽度 --> <!-- border-style 设置绘制边框使用样式 --> <!-- border-color 设置边框使用颜色 --> <!-- 定义边框宽度 --> <!-- 可用属性: --> <!-- css度量单位,如em, px, cm --> <!-- <百分数> --> <!-- thin, medium, thick --> <style type = "text/css"> p { border-width: 10px; } </style> <!-- 定义边框样式 --> <!-- 可用属性: --> <!-- none 没有边框 (默认) --> <!-- dashed 破折线式边框 --> <!-- dotted 圆点线式边框 --> <!-- double 双线式边框 --> <!-- groove 槽线式边框 --> <!-- inset 内嵌效果边框 --> <!-- outset 外凸效果边框 --> <!-- ridge 脊线边框 --> <!-- solid 实线边框 --> <style type = "text/css"> p { border-style: outset; } </style> <!-- 为一条边应用边框样式 --> <!-- border-top-width --> <!-- border-top-style --> <!-- border-top-color --> <!-- border-bottom-width --> <!-- border-bottom-style --> <!-- border-bottom-color --> <!-- border-left-width --> <!-- border-left-style --> <!-- border-left-color --> <!-- border-right-width --> <!-- border-right-style --> <!-- border-right-color --> <style type = "text/css"> p { border-width: 5px; border-style: solid; border-color: black; border-left-width: 10px; border-left-style: dotted; border-top-width: 10px; border-top-style: dotted; } </style> <!-- 使用border简写属性 --> <!-- border: <宽度> <样式> <颜色> --> <!-- border-top: <宽度> <样式> <颜色> --> <!-- border-bottom: <宽度> <样式> <颜色> --> <!-- border-left: <宽度> <样式> <颜色> --> <!-- border-righr: <宽度> <样式> <颜色> --> <style type = "text/css"> p { border: medium outset green; border-top: 10px inset; } </style> <!-- 创建圆角边框 --> <!-- 可用属性: --> <!-- border-top-left-radius: --> <!-- border-top-right-radius: --> <!-- border-bottom-left-radius: --> <!-- border-bottom-right-radius: --> <!-- border-radius: --> <!-- 值可为 <长度值> <百分数> --> <style type = "text/css"> p { border: medium outset green; border-top-left-radius: 10px 5px; border-top-right-radius: 10px; } </style> <style type = "text/css"> p { border: medium outset green; border-radius: 10px / 5px; border-radius: 10px 10px 10px 10px / 5px 5px 5px 5px; } </style> <!-- 水平半径 / 垂直半径 --> <!-- 将图像用作边框 --> <!-- border-image-source: 设置图像来源 --> <!-- border-image-slice: 设置切分图像偏移 --> <!-- border-image-width: 设置图像边框的宽度 --> <!-- border-image-outset: 设置图像向外扩展的部分 --> <!-- border-image-repeat: 设置图像填充边框区域的模式,可为: stretch repeat round --> <!-- border-image: 简写属性 --> <!-- 目前 许多浏览器暂不支持该属性,一些浏览器支持但需要用厂商特定前缀 --> <style type = "text/css"> p { -webkit-border-image: url(icon.png) 30 / 50px; -moz-border-image: url(icon.png) 30 / 50px; -o-border-image: url(icon.png) 30 / 50px; } </style> <!-- 浏览器相应的厂商前缀 --> <!-- chrome safari -webkit- --> <!-- Opera -o- --> <!-- Firefox -moz --> <!-- Internet Explorer -ms- --> <!-- 控制切分图重复方式 --> <!-- border-image-repeat: stretch repeat round space --> <style type = "text/css"> p { -webkit-border-image: url(icon.png) 30 / 50px round repeat; -moz-border-image: url(icon.png) 30 / 50px round repeat; -o-border-image: url(icon.png) 30 / 50px round repeat; } </style> <!-- 设置元素的背景 --> <!-- background-color 背景颜色,显示在背景图像下面--> <!-- background-image 背景图像,如果指定一个以上图像,则后面图像绘制在前面图像的下面--> <!-- background-repeat 图像重复方式--> <!-- background-size 图像尺寸--> <!-- background-position 图像位置--> <!-- background-attachment 图像是否固定或随页面一起滚动--> <!-- background-clip 图像裁剪方式--> <!-- background-origin 图像绘制起始位置--> <!-- background 简写属性--> <!-- 设置背景图像和颜色 --> <style type = "text/css"> body { background-color: lightgray; background-image: url(pic.jpg); background-size: 40px 40px ; background-repeat: repeat-x ; background-attachment: fixed; } </style> <!-- background-repeat 可用属性 repeat-x, repeat-y, repeat, space, round, no-repeat --> <!-- background-size 可用属性: contain, cover, auto --> <!-- background-position 可用属性: top, left, right, bottom, center --> <!-- background-attachment 可用属性: fixed(背景固定在视窗上), --> <!-- local(背景随滚动条一起动), --> <!-- scroll(背景固定在元素上) --> <!-- background-origin 和 background-clip 可用元素 --> <!-- border-box 在边框盒子内部--> <!-- padding-box 在内边距盒子内部--> <!-- content-box 在内容盒子内部--> <!-- 使用background简写属性 --> <style type = "text/css"> table { background: lightgray top right no-repeat border-box content-box local url(); } </style> <!-- 有些浏览器还不支持这个 background 简写属性 --> <!-- 创建盒子阴影 --> <!-- box-shadow: --> <!-- box-shadow: hoffset voffset blur spread color inset --> <!-- hoffset 阴影水平偏移量,正值右移,负值左移 --> <!-- voffset 阴影垂直偏移量,正值下方,负值上方 --> <!-- blur (可选) 模糊值, 值越大越模糊,默认为0,边界清晰 --> <!-- spread (可选) 阴影延伸半径,正值扩大,负值缩小 --> <!-- color (可选) 阴影颜色 --> <!-- inset (可选) 将外部阴影设置为内部阴影 --> <!-- 可以在box-shadow中定义多个阴影,只需要用逗号隔开 --> <style type = "text/css"> table { box-shadow: 5px 4px 10px 2px gray; } </style> <style type = "text/css"> table { box-shadow: 5px 4px 10px 2px gray / 4px 4px 6px gray inset; } </style> <!-- 应用轮廓 --> <!-- 轮廓绘制在盒子边框的外面,轮廓不属于页面,应用轮廓不需要调整页面布局 --> <!-- outline-color: 外围轮廓颜色 --> <!-- outline-offset: 轮廓距离元素边框偏移量 --> <!-- outline-style: 轮廓样式 和 border-style一样 --> <!-- outline-width: 轮廓宽度 --> <!-- outline-color: 简写属性 --> <style type = "text/css"> table { outline-offset: 20px; outline-style: outset; outline-width: 3px; } </style>
相关推荐
猫沙盆 2020-07-08
zengni 2019-12-03
nicepainkiller 2019-12-30
冰蝶 2019-12-28
ozhanjun 2019-11-04
尚衍亮 2018-02-01
85266431 2015-07-29
willluckysmile 2019-06-28
淡风wisdon大大 2018-02-01
yibawuqing 2019-06-28
buttonChan 2015-03-26
randyjin 2015-03-12
如果我们把input的type设置为submit,是的,提交表单经常需要submit按钮,就像下面这样:。<inputtype="submit"class="button"value="登录"
陈浩 2014-10-08
realitycss 2014-05-05
csstpeixun 2013-04-28
jianqi 2019-06-21
yezi 2019-06-21
JenniferMuMu 2013-01-18
每天积累一点点 2012-11-15