Download presentation
Presentation is loading. Please wait.
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
下节内容 文本和字体
Similar presentations