基础知识二

H5基础与 CSS3

H5基础

HTML5 是下一代的 HTML。

特性

2.CSS3样式属性

圆角

语法

例子

/*border-radius：[ length | percentage ]{1,4} ] / [ length | percentage ]{1,4} ] 默认值：0*/

.a{
	width: 200px;
	height: 100px;
	/*border-radius: 100px 100px 100px 100px/50px 50px 50px 50px;*/
	border-radius: 100px/50px;/*以上简写*/
	background:#8f0;
	}/*——椭圆*/

简写

.a{
	/*border-top-left-radius: 100px 30px;
	border-top-right-radius: 60px 50px ;
	border-bottom-left-radius: 80px 20px;
	border-bottom-right-radius: 100px 50px ;*/
	border-radius:100px 60px 100px 80px/30px 50px 50px 20px;/*以上简写*/
  }

.b{
	width: 0;
	height: 0;
	border: 50px solid black;
	border-color: #0f8 transparent #8f0 #08f;
	border-radius: 50px;
	}

图像边框

<!--border-image-source : none | url(图像来源路径)默认值：none 
border-image-slice : [ number | percentage ]{1,4} && fill  默认值：100% 
border-image-width : [ length | percentage | number | auto ]{1,4} 默认值：1 该属性用于指定边框宽度。
border-image-outset : [ length | number ]{1,4} 默认值：0  对边框背景图的扩展
border-image-repeat : [ stretch | repeat | round ]{1,2} 默认值：stretch 指定边框背景图的填充方式

涉及到的取值

stretch： 指定用拉伸方式来填充边框背景图。
repeat： 指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round： 指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
border-image:url() number% stretch;-->

阴影

文本阴影

语法

1	/text-shadow：none \| shadow [ , shadow ]shadow = length{2,3} && color ]默认值：none */

取值

none： 无阴影
第1个长度值：阴影水平偏移值。可为负值
第2个长度值：阴影垂直偏移值。可为负值 
第3个长度值：可选，阴影模糊值。不允许负值
color： 设置对象的阴影的颜色。

盒阴影

语法

1	/box-shadow：none \| shadow [ , shadow ]shadow = length{2,4} && color 默认值：none inset 内阴影*/

取值

1	第4个长度值：可选，阴影外延值。不允许负值

背景尺寸

/*
backgroun-size
length： 长度值指定
percentage： 百分比指定
auto： 真实大小
cover：等比缩放到完全覆盖容器，背景图像有可能超出容器 
contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内
*/

H5基础 与 CSS3

特性

H5基础与 CSS3