网页中的图片可以传递更丰富的信息,提升浏览者的审美感受,使用CSS定义图片样式,是网站设计的一项重要工作,这篇文章就来介绍一下如何设置图片边框、图片大小?或者可以参考:CSS盒子模型的边框属性。
CSS设置图片边框
CSS使用border属性
来设置图片的边框,它可以分为以下几种属性:
border-style
:边框线的形状,属性值有sold实线、dashed虚线、dotted点线、double双线。border-width
:边框线的宽度。border-color
:边框线的颜色。border-left-style
:左边框线的形状。- left、right、top、bottom同理,可分别设置。
border
:形状 宽度 颜色 可按照顺序简写
CSS设置图片大小
CSS中图片的大小使用height和width属性
就可以,一般只设置一个,等比缩放。属性值可以为像素px,也可以使用百分比,需要注意的是,百分比不是相对于原图而言,是相对于父标签的,这里不再演示,比较简单!
CSS设置图片对齐方式
图片可以使用text-align属性
设置水平方式对齐,但是需要注意只能对图片的父标签操作,对图片本身没有效果!
图片可以使用vertical-align属性
设置垂直方式对齐,一般用在文本和图像结合使用的时候,属性值有baseling(默认)、top(文字与图片顶部对齐)、bottom(文字与图片底部对齐)、middle(文字与图片中间对齐)、text-bottom、super(文字上标与图片底部对齐)、sub(文字下标与图片底部对齐)、30px(文字和图片垂直方向距离30px,可取负值)。
图片可以使用opacity属性
进行透明度设置,取值在0到1之间,需要对不同的浏览器设置兼容性:
img{opacity:0.3; /*标准写法*/
filter:alpha(opacity=30); /*IE早期取值为0到100*/
-moz-opacity:0.3; /*火狐浏览器取值为0到1*/}
CSS设置图片圆角
CSS使用border-radius属性
设置图片圆角,属性值可以为像素px,同样需要对浏览器设置兼容性:
img{
border-radius:4px; /*标准写法*/
-moz-border-radius:4px;/*火狐浏览器*/
}
声明:1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!