Css全教程 边框背景轮廓 群号：239234426 韬略课堂：何韬.

Presentation on theme: "Css全教程 边框背景轮廓 群号：239234426 韬略课堂：何韬."— Presentation transcript:

1 css全教程 边框背景轮廓 群号： 韬略课堂：何韬

2 边框 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;

3 none: 默认无边框 dotted: dotted:定义一个点线框 dashed: 定义一个虚线框 solid: 定义实线边界 double: 定义两个边界。 两个边界的宽度和border-width的值相同 groove: 定义3D沟槽边界。效果取决于边界的颜色值 ridge: 定义3D脊边界。效果取决于边界的颜色值 inset:定义一个3D的嵌入边框。效果取决于边界的颜色值 outset: 定义一个3D突出边框。 效果取决于边界的颜色值

4 背景 p {background-color: gray;}
body {background-image: url(/i/eg_bg_04.gif);} a.radio {background-image: url(/i/eg_bg_07.gif);}

5 背景重复 body { background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y; }

6 背景定位 body { background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat; background-position:center; }

7 位置关键字 p { background-image:url('bgimg.gif');
background-repeat:no-repeat; background-position:top; }

8 关键字 center center center top top center 或 center top
bottom bottom center 或 center bottom right center 或 center right left left center 或 center left

9 百分数值 body { background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat; background-position:50% 50%; }

10 背景关联 如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚 动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过 这个属性，可以声明图像相对于可视区是固定的（fixed），因此 不会受到滚动的影响： background-attachment: fixed; croll 默认值。背景图像会随着页面其余部分的滚动而移动。 fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit 规定应该从父元素继承 background-attachment 属性的 设置。

11 body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed }

12 轮廓（outline） outline 与 border 的区别
border 可应用于几乎所有有形的html元素，而 outline 是针对链接、 表单控件和ImageMap等元素设计。从而另一个区别也可以推理出， 那就是： outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需JavaScript配 合CSS来控制。 input:focus { outline: red solid thin;} 轮廓在两方面与边框不同： 轮廓不占用空间 轮廓可以是非矩形

13 outline outline-width outline-style outline-color outline-offset 边框内距/*IE和 Opera 不支持*/

14 轮廓（outline） <font style="outline:green solid thin">aaaaa</font> 宽度 thin medium thick length inherit

15 下节内容 文本和字体