outline实现border-radius效果

最新推荐文章于 2024-11-11 08:39:29 发布
最新推荐文章于 2024-11-11 08:39:29 发布
阅读量6.5k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 网页布局 文章标签： border-radius outline-radius
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wangkadm/article/details/46534899
本文介绍了当border-radius无法满足需求时，如何通过outline属性来实现圆角效果，并提供了具体的实现代码和参考资料。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

outline实现border-radius效果



今天发现border-radius不能满足需求,这时候就想到了使用outline实现

但是查了资料,只有firefox支持outline-radius(-mox-outline-radius)

又查了更多资料,终于找到了解决方案


具体实现代码:


box-shadow: 0 0 0 5px rgba(255,255,255,0.3);

5px表示radius

后面的rgba(255,255,255,0.3)表示颜色,我这里用了半透明,也可以是16进制的#FFFFFF



具体资料,我主要是从这里找的

http://www.zhangxinxu.com/wordpress/2015/04/css3-radius-outline/



CSS---outline-offset--元素边缘或边框之间的间隙
liuhao9999的博客
06-20 1003
CSS---outline-offset--元素边缘或边框之间的间隙
Html中的边框弧边,CSS边框属性一---border-radius
weixin_39645019的博客
06-30 3324
1、CSS outline 属性outline (轮廓)是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。p{outline:#00FF00 dotted thick;}2、CSS border-radius 属性border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。例子1：一个参数的时候border-radius:2em;等价于bo...
CSS3 border-radius 属性和CSS outline 属性
weixin_30699235的博客
11-03 273
CSS3 border-radius 属性 border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。 提示：该属性允许为元素添加圆角边框！ 注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则...
CSS3边框属性：border-radius、outline边框外轮廓的使用
yyyyyyysc的博客
10-21 861
CSS3边框属性：border-radius、outline边框外轮廓的使用
解决outline-radius方法
weixin_44463600的博客
08-06 1988
一开始思路是设置轮廓outline，然后设置outline的圆角，后来发现只有在火狐中才能实现-moz-outline-radius。查了资料原来我们也可以用box-shadow来进行投影实现。张鑫旭老师网址：https://www.zhangxinxu.com/wordpress/2015/04/css3-radius-outline/ 想实现一个不断膨胀的五颜六色边的泡泡，还没解决，怕忘记所以...
outline 和 border-radius产生的碰撞
weixin_46112649的博客
05-01 668
outline是否会贴合border-radius属性产生的圆角？
border-radius往外
12-09
`border-radius`属性用于设置元素的边框圆角。如果想要将圆角往外扩展，可以使用`...最后，我们将原来边框的右下角和左下角的圆角半径设置为0，这样就可以让外边框的圆角占据整个圆角，从而实现了往外扩展的效果。
uniapp中的border-radius
12-27
在某些情况下，特别是在移动Web开发中应用 `border-radius: 50%` 可能不会得到预期完美的圆形效果，尤其是在采用相对长度单位（如 rem）设定宽度高度的情况下。为了保证跨平台的一致性表现，可以选择转换成绝对单位 ...
CSS基础知识day8 box-sizing、resize、box-shadow、opacity、背景属性、border-radius、渐变、字体图标、2D、3D变换、过渡、动画、伸缩盒模型、BFC
2301_77358195的博客
11-11 553
CSS3在未来会按照。
tailand.css 怎么设置border-radius
最新发布
08-19
<input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-colors" placeholder="请输入用户名" /> ...
用JavaScript实现 "outline" 的圆角效果
weixin_30654583的博客
04-24 666
在文本框中，当这个文本框获得焦点的时候，文本框的外围有一个蓝色的框，如图所示。 这个蓝色矩形外框是CSS的一个属性 outline 但是如图中所示，当我们为文本框设置 borde-radius时（目的是为了让其更美观），outline依旧是一个矩形。 这使得文本框获得焦点时非常不美观，在Firefox浏览器中，有outline-radius属性可以设置其圆角，其用法和 b...
CSS轮廓outline
weixin_34409703的博客
03-15 116
前面的话 　　轮廓outline处在边框边界的外面，它不像边框那样参与到文档流中，因此轮廓出现或消失时不会影响文档流，即不会导致文档的重新显示。利用轮廓，浏览器可以合并部分轮廓，创建一个连续但非矩形的形状。默认地，轮廓是一个动态样式，只有元素获取到焦点或被激活时呈现 　　[注意]IE7-浏览器不支持 轮廓样式 　　与边框类似，轮廓最基本的方面是样式，如果一个轮廓没有样式，轮廓将根本不...
小tip: CSS3如何实现圆角的outline效果？
03-22 301
byzhangxinxufromhttp://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=4765 一、首先，outline是个很牛逼的东西 温故而知鑫，10年的时候写过一篇可用性方面的文章：“页面可用性之outline轮廓外框的一些研究”，还算挺有用的；3年之后，也就是13年，介绍了个没什么使用价...
CSS常用属性文档
qq_25011545的博客
02-22 529
css选择器 display布局 position定位 animation动画
《CSS揭秘》边框内圆角
LobsterM的博客
07-30 382
难题 有时我们需要一个容器，只在内侧有圆角，而边框或描边的四个角在外部仍然保持直角的形状，如图： 我们会有常规的标签嵌套方案： 标签嵌套方案 可使嵌套的内标签设置圆角效果，就完成了我们想要的效果。 代码展示： .div1 { max-width: 332px; background: #655; padding: .8em; } .div1>div { max-width: 300px;
Qt中样式表常用的属性名称定义
qianniulaoren的博客
09-15 1539
Qt中样式表常用的属性和定义
box-shadow实现outline圆角
aniaocool的博客
05-24 1986
如border有border-radius outline也有outline-radius 但是目前outline-radius只在火狐上有用 其他浏览器都不支持。-moz-outline-radius: 30px;目前可以使用box-shadow来模拟outline圆角效果border-radius: 30%; border: 5px solid red; box-shadow: 0 0 0
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值