• 技术文章 >web前端 >css教程

    css如何设置图片轮廓

    VV2020-11-30 17:04:56原创67

    css设置图片轮廓的方法:可以利用outline属性来进行设置,如【outline:green dotted thick;】。outline是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

    本教程操作环境:Windows7系统、css3版,本文适用于所有品牌的电脑。

    相关属性:

    outline(轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。

    (学习视频分享:css视频教程

    outline简写属性在一个声明中设置所有的轮廓属性。

    可以设置的属性分别是(按顺序):outline-color, outline-style, outline-width

    如果不设置其中的某个值,也不会出问题,比如 outline:solid #ff0000; 也是允许的。

    属性值:

    代码实现:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8"> 
    <style>
    img{
    	border:1px solid red;
    	outline:green dotted thick;
    }
    </style>
    </head>
    
    <body>
    <img src="../demo/1.jpg" width="400"/>
    </body>
    </html>

    效果:

    4dfcf7ab522bb5aaa4c1e44a826cd55.png

    相关推荐:CSS教程

    以上就是css如何设置图片轮廓的详细内容,更多请关注php中文网其它相关文章!

    本文原创发布php中文网,转载请注明出处,感谢您的尊重!
    专题推荐:css 图片 轮廓
    上一篇:css属性可分为哪几大类 下一篇:css3怎么加内边框
    第14期线上培训班

    相关文章推荐

    • css 轮廓(outline)属性是如何使用的?轮廓属性与边框属性的区别(实例)• 文本轮廓在哪设置• CSS轮廓(outline)是什么• ps怎么描边外轮廓?

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网