CSS笔记(美化图像)

一、插入图像
替代文本“></code> <br> <code><img></code>标签并不会在网页中插入图像,而是从网页上链接图像,它创建的是被引用图像的占位空间</p> 
  <p>二、设置图像格式 <br> 1、定义图片大小 <br> height:定义图像的高度 <br> width:定义图像的宽度 <br> ismap:将图像定义为服务器端图像映射 <br> usemap:将图像定义为客户端图像映射 <br> longdesc:指向包含长的图像描述文档的URL <br> 2、定义图片边框 <br> <code>border:none</code>消除图像边框 <br> 1)边框样式(使用border-style属性) <br> 虚线框 <br> <code>border-style:dotted | dashed</code> <br> 实线框 <br> <code>border-style:solid | double | groove | ridge | insert | outset</code> <br> 这几个取值分别表示实线、双线、立体凹槽、立体凸槽、立体凹边、立体凸边 <br> 2)边框颜色和宽度 <br> <code>border-color</code>和<code>border-width</code>均可快速定义(直接指定四个值,代表顶部、右侧、底部和左侧各边属性) <br> border可快速定义样式、粗细和颜色。例如:<code>border: solid 20px red</code> <br> 3、定义<strong>图像不透明度</strong> <br> CSS3<code>opacity:0~1</code> <br> 早期IE<code>filter:alpha(opacity=0~100)</code> <br> 4、定义<strong>圆角图像</strong> <br> <code>border-radius:none | length | lengthA/lengthB | length1 length2 length3 length4</code> <br> 该属性初始值为none,适用于所有元素,除了border-collapse属性值为collapse的table元素 <br> lengthA/lengthB:lengthA表示圆角水平半径,lengthB表示圆角垂直半径 <br> 5、定义<strong>阴影图像</strong> <br> <code>box-shadow: none | <shadow> [,<shadow> ]*;</code> <br> <code><shadow></code>该属性值可以用公式表示为inset&&[< l e n g t h>{2,4}&&color],其中inset表示设置阴影的类型为内阴影,默认为外阴影。< l e n g t h>是由浮点数字和单位标识符组成的长度值,可取正负值,用来定义阴影水平偏移,垂直偏移,以及阴影模糊度、阴影扩展。必须设置偏移量,否则没效果 <br> 6、图文<strong>混排</strong> <br> 重点就是设置图片浮动<code>float:left</code></p> 
  <p>三、设置背景图片 <br> CSS3增强了background属性(复合属性)的功能,允许在同一个元素内叠加多个背景图像。background属性又派生了8个子属性 <br> background-image:定义背景图像 <br> background-color:定义背景颜色 <br> background-origin:指定背景的显示区域 <br> background-clip:制定背景的裁剪区域 <br> background-repeat:设置背景图像是否及如何重复铺排 <br> background-size:定义背景图片的大小 <br> background-position:设置背景图像位置 <br> background-attachment:定义背景图像的显示方式 <br> 1、定义背景图像 <br> <code>background-image: none | <url></code> <br> CSS3支持background-image设置渐变背景 <br> <code>background-image:<linear-gradient>|<radial-gradient>|<repeating-linear-gradient>|repeating-radial-gradient></code> <br> 取值说明: <br> <code><linear-gradient></code>使用线性渐变创建背景图像 <br> <code><radial-gradient></code>使用径向(放射性)渐变创建背景图像 <br> <code><repeating-linear-gradient></code>使用重复的线性渐变创建背景图像 <br> <code><repeating-radial-gradient></code>使用重复的径向(放射性)渐变创建背景图像 <br> 线性: <br> <code>linear-gradient([[[to top|to bottom] | | [to left|to right] ] | |<angle>,]?<color-stop>[,<color-stop>]+)</code> <br> 径向 <br> <code>radial-gradient([[<shape>| |<size>][at<position>]?,|at<position>,]?<color-stop>[,<color-stop>]+)</code> <br> 2、定义显示方式 <br> <code>background-repeat:repeat-x|repeat-y|[repeat|space|round|no-repeat]{1,2}</code> <br> repeat-x:背景图像横向平铺(重复) <br> repeat-y:背景图像纵向平铺 <br> repeat:背景图像在横向和纵向上平铺 <br> no-repeat:背景图片不平铺 <br> round:自动缩放直到适应且填充满整个容器(仅CSS3) <br> space:以相同间距平铺且填充满整个容器或某个方向(仅CSS3) <br> 3、定义显示位置 <br> <code>background-position:</code> <br> 属性取值包括两个值定位x,y轴,默认0% 0%,等效于left top <br> 4、定义固定背景 <br> <code>background-attachment: fixed|local|scroll</code> <br> fixed:背景图像相对于浏览器窗体固定 <br> scroll:相对于元素固定 <br> local:相对于元素内容固定,也就是说当元素内容滚动时背景也会跟着滚动(仅CSS3) <br> 5、定义坐标 <br> <code>background-origin:border-box|padding-box|content-box</code> <br> border-box:从边框区域开始显示背景 <br> padding-box:从补白区域开始显示背景 <br> content-box:仅在内容区域显示背景 <br> 初始值为padding-box <br> <code>background-clip:border-box | padding-box | content-box | text</code> <br> border-box:从边框区域向外裁剪背景 <br> padding-box:从补白区域向外裁剪背景 <br> content-box:从内容区域向外裁剪背景 <br> text:从前景内容(如文字)区域向外裁剪背景 <br> <code>background-size:[<length> | percent> | auto]{1,2}|cover|contain</code> <br> cover:保持宽高比,将图片缩放到刚好完全覆盖所定义背景的区域 <br> contain:保持宽高比,将图片缩放到宽度或高度刚好适应所定义背景的区域</p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id=

你可能感兴趣的:(css)