响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例2-7 CSS3 outline-offset属性

代码

html 复制代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 outline-offset属性</title>
<style>
img {
    margin: 20px;
    width: 100px;
    height: 100px;
     /*边框:1px 实线 灰色*/
    border: 1px solid #eee;
    /*轮廓:1px 实线 黑色*/
    outline: 1px solid #000;
    /*轮廓的偏移量:15px*/
    outline-offset: 15px;
}
</style>
</head>

<body>
    <img src="images/goods/登山鞋.jpg" alt="">
</body>
</html>

上述代码中:

第7~17行代码定义了img图片的样式。

运行效果

outline-offset属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。其取值有0(默认值)、length(轮廓与边框边缘的距离)和inherit(对象元素应从父元素继承outline-offset属性的值)。

相关推荐
伍哥的传说1 小时前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi9878382 小时前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊2 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听13 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿3 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉3 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽3 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课3 小时前
React useEffect 详解与运用
前端·react.js
我想说一句3 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1233 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为