css特殊边框形状_了解CSS边框角形状

我们已经看到了一些已广泛实施的CSS3新功能，例如Rounded Corner， Box Shadow和Text Shadow，仅举几例。仍然有一些试验性的功能，例如我们将在本文中讨论的内容： Border Corner Shape 。

边界角形状使我们可以进一步操纵元素角。虽然我们可以使用border-radius创建圆角，但是Border Corner Shape允许我们形成斜角，铲形角和矩形凹口角。

如何使用它

我们使用border-corner-shape定义形状。在撰写本文时，它接受具有以下值的四个预定义形状： curve ， scoop ， bevel和notch –还建议我们使用cubic-bezier curve来形成自定义形状（请参见此处的建议）。

值得注意的是， border-corner-shape仅声明了shape ，而形状的长度是使用border-radius属性指定的。因此，为了能够看到结果，在形成形状时应同时声明这两个属性。

.box {background-color: #3498DB;border-corner-shape: scoop;border-radius: 30px;width: 200px;height: 200px;
}

给定上述样式规则的示例，我们将得到如下屏幕截图所示的结果。

让我们再看一个例子。这次我们将拐角形状指定为bevel ，并将边界半径设置为50％（ 右下角除外），如下所示。

.box {background-color: #3498DB;border-corner-shape: bevel;border-radius: 50% 50% 0% 50%;width: 200px;height: 200px;
}

上面的样式规则将给我们以下结果。

这很迷人，不是吗？

翻译自: https://www.hongkiat.com/blog/css3-border-shape/

css特殊边框形状_了解CSS边框角形状相关推荐

css实现图片虚化_什么? CSS 阴影竟然还有这种骚操作？
点击上方"IT平头哥联盟",选择"置顶或者星标" 与你一起成长- 原作者:cocoqiao 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 f ...
css设置按钮样式_使用CSS设置按钮样式的快速指南
css设置按钮样式 by Ashwini Sheshagiri 通过Ashwini Sheshagiri Buttons have become an inevitable part of front ...
使用HTML语言和CSS开发商业站点_初识CSS
第4章初识CSS 一.CSS概述 1.什么事CSS CSS全称为层叠样式表(Cascading Style Sheet),通常又称为风格样式表(Style Sheet),它是 ...
css 形状_在CSS形状之外思考
css 形状 CSS is based off a box model. If you have an image that is a circle that you want to wrap tex ...
css文本字体形状_使用CSS更改文本字体
css文本字体形状 In the last module, we discussed text formatting. By now, you already know how to work wit ...
css竖向箭头符号_用css打造一个三角形箭头
3)方法二种的方法虽然我们可以实现调用一次背景图片标示四种三角状态的情况,但是在颜色方面确实单一的,我们只能由一种颜色,那我们需要增加三角形同样在激发鼠标悬浮伪类响应的时候,我们应该怎么做呢?比如鼠标 ...
css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
css不换行属性_前端 | css display:flex 的六个属性你知道吗
前言:display:flex 是一种布局方式.它即可以应用于容器中,也可以应用于行内元素.是W3C提出的一种新的方案,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持. ...
css写√的图标_用CSS来制作图标
想知道如何利用CSS来制作图标吗?并且只使用一个标签的情况下,不能使用伪元素哦! 在利用CSS制作图标时,经常用到border边框,所以,先看看边框的相关知识. 1.藏在border中的不能说的秘密 ...

css特殊边框形状_了解CSS边框角形状

如何使用它

css特殊边框形状_了解CSS边框角形状相关推荐

最新文章

热门文章