css3

2024-07-08 01:27| 来源: 网络整理| 查看: 265

css3-10 css3中的边框样式有哪几种一、总结一句话总结：1.border-radius 2. box-shadow 3.border-image三种，box一种border两种

1、css3中的边框样式有哪几种？

1.border-radius 2. box-shadow 3.border-image三种，box一种border两种

边框样式(新加):1.border-radius 值为圆的直径

2.box-shadowbox-shadow:0px 0px 0px 0px #999;1)5px x偏移 2)5px y偏移3)5px 阴影模糊值4)5px 阴影外延值5)#999 阴影的颜色6)inset 内阴影

3.border-imageborder-image:url('b.png') 26 26 round;border-image:url('b.png') 26 26 stretch;border-image:url('b.png') 26 26 repeat;

2、如何把图形变成圆的？

border-radius设置成和圆的直径一样大

13 width:128px; 14 height:128px; 15 /*border-radius:128px;*/

3、border-radius的原理是什么？

角上面四个小圆在上面截

设置成圆的时候四个角上的圆重合了

18 border-radius:20px 50px 100px 128px;

4、如何用border-radius设置好看的图案？

注意上下左右，调整各自位置的截圆的直径

16 /*border-radius:20px 50px;*/

5、边框阴影的关键词是什么？

box-shadow

注意是box不是boder

6、box-shadow的6个参数是什么意思？

box-shadow:0px 0px 0px 0px #999;1)5px x偏移 2)5px y偏移3)5px 阴影模糊值4)5px 阴影外延值5)#999 阴影的颜色6)inset 内阴影

7、如何设置鼠标点一下样式改变？

js实现，jquery实现，点一下触发事件

click方法a，还要什么mouseenter，mouseleave方法啊

24 25 $('div').mouseenter(function(){ 26 $(this).css({'box-shadow':'0px 0px 5px 5px #999 inset'}); 27 }); 28 29 $('div').mouseleave(function(){ 30 $(this).css({'box-shadow':'0px 0px 0px 0px #999 inset'}); 31 }); 32

8、如何设置边框为图片？

边框预留位置给图片，边框一定要预留位置，预留多大位置，边框图片就会显示多大，而且还要设置边框透明。

border:5px solid transparent; border-image:url(http://images.cnblogs.com/cnblogs_com/Renyi-Fan/1188097/o_carton13.jpg) 20 20 stretch;

二、css3中的边框样式有哪几种 1、相关知识

边框样式(新加):1.border-radius 值为圆的直径

2.box-shadowbox-shadow:0px 0px 0px 0px #999;1)5px x偏移 2)5px y偏移3)5px 阴影模糊值4)5px 阴影外延值5)#999 阴影的颜色6)inset 内阴影

3.border-imageborder-image:url('b.png') 26 26 round;border-image:url('b.png') 26 26 stretch;border-image:url('b.png') 26 26 repeat;

2、代码 border-radius圆角直径 1 doctype html> 2 3 4 5 index 6 7 *{ 8 font-family: 微软雅黑; 9 } 10 11 div{ 12 background: #ccc; 13 width:128px; 14 height:128px; 15 /*border-radius:128px;*/ 16 /*border-radius:20px 50px;*/ 17 /*border-radius:20px 50px 100px;*/ 18 border-radius:20px 50px 100px 128px; 19 } 20 21 22 23 24 25 26 27 box-shadow阴影制作 1 doctype html> 2 3 4 5 index 6 7 *{ 8 font-family: 微软雅黑; 9 } 10 11 div{ 12 width:128px; 13 height:128px; 14 box-shadow:0px 0px 0px 0px #999; 15 } 16 17 18 19 20 21 22 23 24 25 $('div').mouseenter(function(){ 26 $(this).css({'box-shadow':'0px 0px 5px 5px #999 inset'}); 27 }); 28 29 $('div').mouseleave(function(){ 30 $(this).css({'box-shadow':'0px 0px 0px 0px #999 inset'}); 31 }); 32 33 border-image边框图片环绕 1 doctype html> 2 3 4 5 index 6 7 *{ 8 font-family: 微软雅黑; 9 } 10 11 div{ 12 width:128px; 13 height:128px; 14 background: #ccc; 15 border:30px solid transparent; 16 border-image:url('b.png') 26 26 round; 17 } 18 19 20 21 22 23 24 25

【本文地址】

公司简介

联系我们