CSS设置图片样式 图片边框、图片大小、图片样式基础

鳄鱼君

发表文章数:525

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » CSS和CSS3教程 » CSS设置图片样式 图片边框、图片大小、图片样式基础

网页中的图片可以传递更丰富的信息,提升浏览者的审美感受,使用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;/*火狐浏览器*/
}

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《CSS设置图片样式 图片边框、图片大小、图片样式基础》 发布于2020-04-08

分享到:
赞(1) 赏杯咖啡

评论 抢沙发

6 + 2 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册