边框内圆角

最新推荐文章于 2020-11-27 17:09:48 发布
最新推荐文章于 2020-11-27 17:09:48 发布
阅读量341 收藏
点赞数
分类专栏： CSS3 文章标签： CSS3 边框内圆角 border shadow
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bluellow/article/details/52677153
版权

边框内圆角效果图

这里写图片描述

解决方案

  • 两个元素的div方案
  • border-shadow

两个元素的div方案

这个方案应该大家都熟悉了，这里就不详细叙述，具体看源码。

border-shadow方案

border-shadow详细用法
borser-shadow用法连接
用border-shadow来做边框内圆角，这个写法有限制：
1:border-shadow扩张的半径要比outline的宽度小，
2:要比 (根号2-1)r 要大(此r是border-radius的半径)

案例源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框内圆角 </title>
    <style>
        .div_1{
            margin: 0 10px;
            display: inline-block;
            background: #655;
            padding:13px;
        }
        .div_1 > div{
            display: inline-block;
            background: tan;
            border-radius: 13px;
            padding: 16px;
            /*width: auto;*/
        }
        .div_2{
            display: inline-block; /*使div自设应文字的宽度*/
            background: tan;
            border-radius: 13px;
            padding: 16px;
            box-shadow: 0 0 0 10px #655;
            outline: 13px solid #655;
        }
    </style>
</head>
<body>
    <!--用两个元素的写法-->
    <div class="div_1">
        <div>人生若只如初见，
            <br>
            当时只道是寻常。
        </div>
    </div>
    <!--只用一个元素的作法-->
    <div class="div_2">
        人生若只如初见，
        <br>
        当时只道是寻常。
    </div>
</body>
</html>
bluellow
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
侧边框
zly990213的博客
08-04 250
设置一个边框，当边框内容被选择，被点击，以及点击过后都会有不用颜色效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>侧边框</title> <styl
css揭秘--4边框内圆角
weixin_44580139的博客
11-26 400
边框内圆角 文章目录边框内圆角难题：解决：限制： 难题： 给元素添加border-radius属性后，边框外侧就会有圆角。而如何做到让边框内层有圆角，边框或描边的四个角在外部仍然保持直角的形状。 如： 用两个嵌套的容器可以做到，那如何只用一个元素做到呢？ 回想之前知识： 盒子阴影跟着边框圆角走 描边(轮廓)不跟着圆角走，设置了边框圆角，描边内外层还是直角(以后可能修复) 解决： 先给元素加一个border-radius属性,让元素边框外层形成圆角(不设置border属性也可以) div{ ma
CSS揭秘：4.边框内圆角
Eighteen Z
06-19 2376
边框内圆角 背景知识：box-shadow，outline，“多重边框” 一、两个div嵌套 两个div实现内圆角很容易，只需要内圆角外直角即可。 div First Try .box{ width: 200px; padding: 20px; background-color: #655; } .content{ background-color: tan; border-radius: .8em; paddi
css实现内凹圆角，利用圆角反向进行（转）
热门推荐
海天酱油zz
10-17 4万+
最近写到小程序，设计方面有一个设计图涉及内凹圆角问题。网上百度好多种，都是通过径向渐变实现的。虽然能实现单个角，但是当四个角合在一起就很麻烦了。 上设计图 径向渐变实现： background:radial-gradient(40rpx at right bottom,transparent 50%,#1889F6 50%); 但是如果四个重合在一起，我的图片背景是渐变的，那...
CSS实现边框内圆角
Mi的博客
06-05 1万+
CSS实现边框内圆角 实现如图所示效果的两种方式: 1. 利用两个元素实现 利用一个元素实现 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q 插入链接 Ctrl + L 插入代码 Ctrl + K 插入图片 Ctrl + G 提升标题 Ctrl + H 有序列表 Ctrl + O 无序列表 ...
每天坚持一个css-圆与边框（border）
weixin_34261739的博客
09-17 375
每天坚持一个CSS 实现效果： 代码 html: <div id="box"> <div class="circle-out"> <div class="circle-inner"> </div> </div> <div clas...
css效果之边框内圆角
01-19
本文主要介绍了css效果之边框内圆角，分享给大家，也给自己留个笔记，具体如下： 效果如下 你可能想到的方法 padding: 16px; box-shadow: 0 0 0 8px #655; border-radius: 5px; 如果采用上面的方式，会产生一个与...
C#winform textbox 画边框和圆角
01-26
为Winform中的Textbox添加圆角和边框,圆角大小和边框大小可以设置
css 圆角边框
09-25
圆角框大概是CSS3中备受期待的一个属性，也有很多浏览器开始支持它了。但大规模的应用它还需要不少的时间。在目前，广泛使用的方法还是应用图像了。
Android编程实现圆角边框布局效果的方法
08-30
Android编程实现圆角边框布局效果的方法 Android编程实现圆角边框布局效果的方法是Android开发中常见的需求之一。为了实现圆角边框布局效果，需要了解Android TableLayout布局的相关属性操作和圆角边框实现技巧。...
自定义标签实现圆角边框
10-30
纯css实现的圆角边框效果代码
css实现边框内圆角
lhrdlp的学习笔记
11-26 1014
css实现边框内圆角 有时我们需要一个容器,只有在内侧有圆角,而边框或四个角在外依然保持直角的形状,我们可以用两个div元素来实现这种效果,具体如下: html代码 <div class="container"> <div> 接天莲叶无穷碧 映日荷花别样红 </div> &...
css 内圆角
qq_45219069的博客
11-27 992
background-image:radial-gradient(circle at right top, #E6553D, #E6553D 0.2rem, transparent 0.22rem), radial-gradient(circle at right bottom, #F47045, #F47045 0.2rem, transparent 0.22rem), radial-gradient(circle at left top, #E6553D, #E6553D 0
CSS3黑科技 - 内凹圆角
Jepson_鹏鹏的专栏
10-14 2万+
CSS3 黑科技 - 内凹圆角 - 径向渐变实现圆角，大家一定都会做，border-radius, 内凹圆角如何实现？可以拿个白色圆盒子盖住方形盒子的大半边实现，但是这样，是不透明的，背景发生改变时，就要改遮盖盒子的颜色，或者背景是渐变，改起来更麻烦，或背景是图片等等，就直接不太好改了，这种方法就有局限性。 说白了就是遮盖的那部分不透明以后，自适应性不强。这里介绍一个用径向渐变实现的内凹圆角，可以解
border-radius详解
weixin_34194317的博客
07-06 1万+
2019独角兽企业重金招聘Python工程师标准>>> ...
如何设置窗口圆角及边框
冥萧阳的专栏
12-08 1万+
转载请注明出处：   在文章开头依然先贴出核心代码 @Override public void onAttachedToWindow() { super.onAttachedToWindow(); DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaul
css实现卡卷内圆角
Yiu的博客
06-13 1791
在工作中做一些活动类的H5的时候，经常会遇到UI大佬给出的难题，比如卡卷类的上下半圆角，如图： 看到这个的时候显示蒙了一下，然后快速想出了解决办法，一个盒子内填充两个伪元素不就解决了吗？ 事实结果是可以解决，但是阴影加不上去被伪元素覆盖，代码过于耦合。 于是通过查阅资料，在《CSS揭秘》书中找到了一种解决方案，可以实现两个挖空半圆的效果；但又发现一个问题————不能 加阴影box-...
如何实现边框内圆角
大白兔
05-08 3025
实现效果如下： 对于上述效果，我们可以用两个嵌套的div实现，如下： &lt;div class="test-wrap"&gt; &lt;div&gt;&lt;/div&gt; &lt;/div&gt; div{ width: 180px; height: 100px; } .test-wrap{ background: red; padding:...
vue3 边框倒圆角
最新发布
07-09
在 Vue3 中，如果你想要给元素添加边框并使其呈现倒圆角效果，你可以使用 CSS 的 `border-radius` 属性以及 `box-sizing` 属性。以下是基本步骤： 1. 首先，在你的样式表或者组件的 `<style>` 标签内，设置全局样式，例如： ```css * { box-sizing: border-box; /* 设置默认的盒模型为 border-box，包含了边框和内填充 */ } ``` 2. 然后，针对需要倒圆角的元素，比如一个 `.rounded-border` 类，定义样式： ```css .rounded-border { border: 1px solid #ccc; /* 设置边框样式，这里是实线边框 */ border-radius: 10px; /* 设置边框圆角，值可以自定义适应你的设计 */ padding: 10px; /* 可选，提供一些内填充以更好地展示圆角效果 */ } ``` 3. 在Vue组件中使用这个类名： ```html <div class="rounded-border">这是一个带倒圆角的边框</div> ``` 这样，该元素就会有一个边框并且四个角落都有10像素的圆角了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值