css中设置按钮的形状_如何在网页设计中使用CSS形状

最新推荐文章于 2024-04-24 19:07:04 发布

daique1908

最新推荐文章于 2024-04-24 19:07:04 发布

阅读量2k

点赞数

文章标签： css html python js java ViewUI

本文介绍了如何使用CSS Shapes模块来创建非矩形的网页布局，包括如何创建自定义形状、调整形状盒模型以及使用不同形状函数。CSS Shapes允许设计人员让内容围绕非标准形状流动，提供了更多设计自由度。虽然目前浏览器支持有限，但随着未来的发展，这一特性有望在网页设计中发挥更大作用。

摘要由CSDN通过智能技术生成

css中设置按钮的形状

我们今天用来建立网站的布局原则（列和行，角度和线条）在很大程度上受到其印刷传统的影响。而且，尽管Web上的网格实现越来越好并且更加完善，但是与印刷媒体相比，Web布局通常仍然很笨拙，尤其是在内容流方面。

杂志和报纸一直喜欢用优雅的方式来安排内容的布局，例如在非矩形形状的周围或内部包裹文字。

让我们探讨一下CSS Shapes模块如何使我们在网络上拥有同样的自由。

CSS形状快速入门

CSS形状使Web设计人员可以创建除简单的矩形和正方形之外的更多抽象的几何布局。该规范为我们提供了新CSS属性，其中包括shape-outside和shape-margin 。浏览器支持是合理的，尽管这些属性当前仅在Chrome，Opera和Safari中可用，并且带有-webkit-前缀，因此带有-webkit-shape-outside 。

shape-outside属性将导致内联内容沿着元素曲线（而不是box model ）环绕（外部）。最初，还存在shape-inside将内容包装在元素内；圆形元素中的文字也会被模制成圆形。但是，该实现已推迟到CSS Shapes Level 2使用。

shape-margin属性设置使用shape-outside任何形状周围的边距。

让我们看一些例子。

创建形状

找出CSS Shapes如何工作的最简单方法可能是创建一个圆。因此，这是一个div （我们的圈子），旁边有几个段落。

<div class="circle"></div>
<p>Lorem ipsum…</p>
<p>Lorem ipsum…</p>
<p>Lorem ipsum…</p>

这是一些基本的样式，包括圆的宽度和高度，用于使元素成形的border-radius以及浮点数，因此该段将元素环绕。

.circle { 
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
}

就像我们将要除外的那样，现在将段落包裹在元素周围。但是，由于border-radius属性未定义实际的元素形状，因此段落换行不会形成圆曲线。

如果我们通过浏览器DevTools检查元素，则实际上该元素仍然是一个盒子。因此，即使我们的div具有圆形外观， border-radius也不会对元素的实际形状产生任何影响。

为了使我们的段落保持圆形，我们需要通过shape-outside属性更改实际的元素形状；在这种情况下，我们将添加一个带有circle()函数的值。

.circle {
    width: 250px;
    height: 250px;
    background-color: #40a977;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
}

现在，我们的段落整齐地环绕圆的圆周。

此外，如果现在通过DevTools检查元素，我们将看到该元素已正确渲染为圆形。

留出一些余地，看一下它如何增强简单的布局：

自定义圈子

circle()函数采用两个值分别定义半径和中心坐标 ： circle(r at xy) 。默认情况下，半径值是根据元素大小得出的；例如，如果元素为300px宽，则半径将为150px （半径为圆直径的一半）。

类似地， x和y坐标是相对于元素的大小测量的，默认情况下将其设置为50% 50% ；就在元素的中心。

当您要调整形状的大小（同时保持实际的元素大小）或移动形状（同时保留元素的位置）时，这两个值将很有用。在下面的示例中，我们将圆的半径减小到60px ，并将中心坐标设置为30% 70% ，这60px圆移到元素框的左下角。

值得注意的是，在修改圆时，必须明确定义中心坐标和半径。仅添加其中之一是无效的。

circle( 60px at 30% 70% )  // correct.
circle( 60px )  // invalid.
circle( at 30% 70% )  // invalid.

形状盒模型

CSS Shapes继承了与元素相同的盒子模型原理，但在元素本身范围之外应用。这使我们可以将元素分别设置为border-box而将形状设置为padding-box 。要更改形状框模型 ，请在函数后添加框模型关键字之一，即content-box ， margin-box ， border-box或padding-box 。

.circle {
  width: 250px;
  height: 250px;
  background-color: #40a977;
  border-radius: 50%;
  float: left;
  padding: 10px;
  border: 20px solid #ccc;
  margin: 30px;
  -webkit-shape-outside: circle() padding-box;
    shape-outside: circle() padding-box;
}

形状的默认框模型设置为margin-box 。在下面的示例中，我们将其更改为padding-box以告知浏览器确定形状大小或跨度时要排除元素边距。现在，我们应该找到段落通过边框，并立即触摸元素的填充。

我强烈建议您阅读有关CSS Box模型基础知识的免费课程，以详细了解Box模型的工作原理。

创建更多形状

CSS Shapes规范附带了一些其他形状函数：

ellipse() ：顾名思义，此函数将创建一个椭圆形。我们可以配置椭圆半径，也可以移动形状中心坐标。但是与circle()函数不同， ellipse()函数应用两个半径测量值：水平和垂直，因此使用ellipse( 100px 180px at 10% 20% ) 。
polygon() ：此函数使我们能够创建更复杂的形状，例如三角形，六边形以及非几何形状。使用多边形并不像创建圆一样容易，但是使用“ 多边形转换器的路径”工具可以使它更加直观。