css全教程 边框背景轮廓 群号：239234426 韬略课堂：何韬
边框 border:5px solid red; border-style:solid; border-color:#98bf21; border-width:5px; border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid;
none: 默认无边框 dotted: dotted:定义一个点线框 dashed: 定义一个虚线框 solid: 定义实线边界 double: 定义两个边界。 两个边界的宽度和border-width的值相同 groove: 定义3D沟槽边界。效果取决于边界的颜色值 ridge: 定义3D脊边界。效果取决于边界的颜色值 inset:定义一个3D的嵌入边框。效果取决于边界的颜色值 outset: 定义一个3D突出边框。 效果取决于边界的颜色值
背景 p {background-color: gray;} body {background-image: url(/i/eg_bg_04.gif);} a.radio {background-image: url(/i/eg_bg_07.gif);}
背景重复 body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; }
背景定位 body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:center; }
位置关键字 p { background-image:url('bgimg.gif'); background-repeat:no-repeat; background-position:top; }
关键字 center center center top top center 或 center top bottom bottom center 或 center bottom right center 或 center right left left center 或 center left
百分数值 body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50% 50%; }
背景关联 如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚 动。当文档滚动到超过图像的位置时，图像就会消失。 您可以通过 background-attachment 属性防止这种滚动。通过 这个属性，可以声明图像相对于可视区是固定的（fixed），因此 不会受到滚动的影响： background-attachment: fixed; croll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承 background-attachment 属性的 设置。
body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed }
轮廓（outline） outline 与 border 的区别 border 可应用于几乎所有有形的html元素，而 outline 是针对链接、 表单控件和ImageMap等元素设计。从而另一个区别也可以推理出， 那就是： outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需JavaScript配 合CSS来控制。 input:focus { outline: red solid thin;} 轮廓在两方面与边框不同： 轮廓不占用空间 轮廓可以是非矩形
outline outline-width outline-style outline-color outline-offset 边框内距/*IE和 Opera 不支持*/
轮廓（outline） <font style="outline:green solid thin">aaaaa</font> 宽度 thin medium thick length inherit
下节内容 文本和字体