outline 和 border-radius产生的碰撞

最新推荐文章于 2024-07-19 15:50:46 发布
最新推荐文章于 2024-07-19 15:50:46 发布
阅读量509 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46112649/article/details/124532049
版权

outline和border-radius

引言：
在css揭秘中outline方案内说过outline描边不一定会贴合border-radius属性产生的圆角，如果元素是圆角，他的描边可能还是直角，css工作组认为是bug，未来可能会改为贴合border-radius圆角。这里对chrome、edge、IE三个浏览器的测试。
问题：
当dom元素设置了outline是默认是在dom元素的边框外添加一个描边,可是是否会根据border-radius设置的圆角边框对应出现圆角描边呢？

多说不易，上才艺
IE浏览器当前版本为IE11

chrome浏览器
在这里插入图片描述
Edge浏览器
在这里插入图片描述
所以推断出

chromeEdgeIE
圆角描边圆角描边矩形描边
tookingHome
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
outline实现border-radius效果
蓝色的乌鸦的专栏
06-17 5481
outline实现border-radius效果 今天发现border-radius不能满足需求,这时候就想到了使用outline实现 但是查了资料,只有firefox支持outline-radius(-mox-outline-radius) 又查了更多资料,终于找到了解决方案 具体实现代码: box-shadow: 0 0 0 5px rgba(25
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：外描边设置）
m0_64420071的博客
03-05 1077
ArkTS声明式开发（通用属性：外描边设置）
《CSS揭秘》边框内圆角
LobsterM的博客
07-30 299
难题 有时我们需要一个容器，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状，如图： 我们会有常规的标签嵌套方案： 标签嵌套方案 可使嵌套的内标签设置圆角效果，就完成了我们想要的效果。 代码展示： .div1 { max-width: 332px; background: #655; padding: .8em; } .div1>div { max-width: 300px;
CSS outline和border区别
weixin_34408717的博客
07-06 438
2019独角兽企业重金招聘Python工程师标准>>> ...
解决outline-radius方法
weixin_44463600的博客
08-06 1856
一开始思路是设置轮廓outline，然后设置outline的圆角，后来发现只有在火狐中才能实现-moz-outline-radius。查了资料原来我们也可以用box-shadow来进行投影实现。张鑫旭老师网址：https://www.zhangxinxu.com/wordpress/2015/04/css3-radius-outline/ 想实现一个不断膨胀的五颜六色边的泡泡，还没解决，怕忘记所以...
css之outline实现圆角效果
dianmo5898的博客
09-27 561
对，你没有看错，outline也可以实现圆角，不过请先读完自然会知道结果； ===========================================================================================================================================================...
PC端windows使用Outline，Outline-Client
01-30
Outline-Client上网用,PC端windows使用
Outline-Client-for-window.exe
10-11
Outline 本身基于现有的开源 V.P.N 软件 shado.wsocks。不同于 shado.wsocks 需要一系列复杂的服务器配置和加密密钥生成步骤，Outline 的易用性在于将整个安装实现自动化：配置仅需几次点击，仅需几分钟。
Outline-Manager-v1.6.0.exe
08-28
帮你下载好啦，犒赏个最便宜的一积分嘿嘿嘿！或是透过下面地址去下载 原始下载页面：...原始下载地址：https://github.com/Jigsaw-Code/outline-server/releases/download/v1.6.0/Outline-Manager.exe
深入浅析border和outline区别
09-24
在网页设计中，`border` 和 `outline` 都是用来定义元素边缘的样式，但它们之间存在着明显的区别。本文将深入探讨这两个属性的差异，并帮助开发者更好地理解和运用它们。 首先，`border` 是一个内置于元素盒模型的...
outline-go-tun2socks
05-16
Outline-go-tun2socks Go软件包，用于为和基于的客户端（现已支持指标）。 对于macOS，iOS和Android，输出为库。 对于Linux和Windows，它是命令行可执行文件。先决条件macOS主机（iOS，macOS） Xcode（iOS，macOS） ...
vue 圆角输入框
qq_43723148的博客
03-02 3465
在vue中实现圆角的搜索框 <template> <div class="box"> <div class="search-box"> <!-- <el-input placeholder="请输入内容" v-model="input3" class="input-with-select"> <el-button style="background=#fff
如何解决outline兼容低版本IE？
孤独行者
07-23 914
最近在做项目中发现，项目中的按钮基本上都是一张gif图片，这就很扯蛋了，最严重的问题就是，如果按钮中的文字超过了gif图片的长度，那么超过的部分就不显示了，这样一来岂不是操作性很低。当然了，这是难不倒万能的程序员的，下面附上我的解决方法： 一开始我的做法是 &lt;input type="button" value="提交" class="cssLongButton"&gt; CSS样式： ...
outline和他娘亲border两三事
weixin_34310785的博客
11-04 320
outline是啥？ outline顾英文名思义就是元素的轮廓，其实一般我们很少去设置元素的outline样式，因此很多人对他不太了解。浏览器默认给很多特定元素的某些行为加上了outline样式，比如a标签、input输入框等。当你用键盘tab键选中这些元素时候都会有一个外边框方便键盘侠操作。我以前一度以为outline这种样式只存在于表...
小tip: CSS3如何实现圆角的outline效果？
taotaomin99的博客
06-27 4348
首先，outline是个很牛批的东西，但是我们通常为了浏览器之间的兼容问题，会把这个outline处理掉，保证页面在各浏览器之间显示的相同。有没有什么方法利用CSS以及使用一层标签，【不能使用::before, ::after伪元素实现】【box-shadow效果不好，我试过了，小尺寸IE会糊边】，兼容IE9+浏览器 实现下面这个加号效果。高手在民间，结果@大地Dudy巧妙使用outline实现了C
css中outline,css中outline的解析（附示例）
weixin_31951365的博客
08-04 1515
本篇文章给大家带来的内容是关于css中outline的解析(附示例)，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在css改变单选框颜色的方法实现中我们要模拟原生单选框通过Tab键获得焦点的效果，这里涉及到一个常常被忽略的属性——outline，由于之前对其印象确实有些模糊，于是本文打算对其进行稍微深入的研究^_^Spec是这样描述它的作用用于创建可视对象的轮廓(元素的borde...
border-radius的兼容问题
weixin_30340819的博客
11-14 226
border-radius可以便捷的制作圆角效果，不需要通过增加圆角图片来达到效果，便于维护。 语法：border-radius:none | 1-4 length | % / 1-4 length|% 按顺序设置圆角四个方向的值，和设置border的顺序一样。 ' / '前后的值都存在，那么' / '前面设置的值为水平半径，后面设置的值为垂直半径。若没有' / '，则水平和锤...
最新！CSSCI（2023-2024）期刊目录公布！
最新发布
2301_76900678的博客
07-19 383
C刊一般指CSSCI来源期刊，即南大核心的缩写，中文名称为《中文社会科学引文索引》，由南京大学中国社会科学研究评价中心制定，用来评价中文社会科学领域的论文收录和文献被引用情况，是我国人文社会科学评价领域的标志性工程。C扩即CSSCI来源期刊扩展版。由于上文所述的C刊是国内期刊中的重要刊物，遴选数量有限，一些优秀刊物由于数量限制无法进入C刊目录，C扩一般指办刊水平和学术价值与真正入选目录期刊还有一些差距但差距不大的刊物，C扩有进入C刊的预期，但C扩是否为核心期刊具体仍由不同单位自己判断。
Web前端-Web开发CSS基础6-弹性盒子
a15735748145a的博客
07-16 1324
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
border-radius往外
12-09
outline-offset: -10px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } <div></div> ``` 上述代码中，我们先设置了一个宽高为100px的`div`元素，并给它设置了一个1px的黑色边框和10px的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值