专业汉语词典知识平台,分享汉字词语知识、历史文学知识解答!

励北网
励北网

css3圆角可以设置几个值,css3圆角教程

来源:小易整编  作者:小易  发布时间:2023-01-03 08:21
摘要:css3圆角可以设置几个值,css3圆角教程。页面元素的装饰一直是前端工程师的重要工作之一,在这若干样式之中有一个样式较为独特,那就是圆角属性。在CSS3前或是老版本的浏览器中要想实现圆角属性的难度较大,要么使用图片装饰,要么使用borde...

css3圆角可以设置几个值,css3圆角教程。页面元素的装饰一直是前端工程师的重要工作之一,在这若干样式之中有一个样式较为独特,那就是圆角属性。在CSS3前或是老版本的浏览器中要想实现圆角属性的难度较大,要么使用图片装饰,要么使用border的奇技淫巧,无论哪种所需要的时间都是不短的。因此,在CSS3中为了让前端工程师们减少在这类常见样式上所消耗的时间,W3C正式把圆角属性border­radius加入了规范之中,至此圆角的实现变得格外轻松惬意。

但大多数初级前端工程师对于border­radius这个属性的认知和使用还停留在一个较浅的水平,这里我就和大家探讨一下该属性的深入应用。
圆角的实现原理

我们浏览器默认每一个块元素都是一个矩形区域,那么当我们给一个块元素设置了order­radius之后浏览器到底做了些什么才让一个矩形区域出现一个圆角效果呢?

形象点来说如下图所示:

css3圆角可以设置几个值,css3圆角教程

border-­radius的属性值
上述为圆角属性为单个值时候的情形,border­radius的类型近似于margin,拥有多种属性值的写法:
以下为各种写法的具体象征意义:
写法一:单个属性值
Border­radius:50px;
单个属性值:四个小圆的半径相同;

css3圆角可以设置几个值,css3圆角教程

写法二:两个属性值
Border­radius:50px 130px;
两个属性值:左上与右下,左下与右上;

css3圆角可以设置几个值,css3圆角教程

写法三:三个属性值
Border­radius:50px 130px 150px;
两个属性值:左上 右上与左下 右下;

css3圆角可以设置几个值,css3圆角教程

写法四:四个属性值
Border­radius:50px 30px 80px 150px;
两个属性值:左上 右上 右下 左下;

css3圆角可以设置几个值,css3圆角教程

以上皆为圆角属性的写法,那我们就只能给元素设置圆角吗?
答案当然否定的,W3C在指定这个属性时就考虑了开发人员的拓展行为,允许开发人员制造一个椭圆边角。
椭圆角的实现原理
border­radius: 200px 200px 200px 200px/50px;
border­radius的属性值可分为两段,由一个反斜杠隔开。
反斜杠前面的值为横轴值,反斜杠后的为纵轴值,椭圆的写法与圆角类似,反斜杠前后皆为独立的,语法和简写都一样。

css3圆角可以设置几个值,css3圆角教程


本文地址:百科问答频道 https://www.neebe.cn/wenda/886580.html,易企推百科一个免费的知识分享平台,本站部分文章来网络分享,本着互联网分享的精神,如有涉及到您的权益,请联系我们删除,谢谢!


百科问答
小编:小易整编
相关文章相关阅读
  • css3渐变属性,css3渐变教程

    css3渐变属性,css3渐变教程

    css3渐变属性,css3渐变教程好程序员web前端教程之CSS3渐变,CSS3渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果,现在通过使用CSS3的渐变(gradients)即...

  • css圆角边框怎么设置,css圆角边框代码

    css圆角边框怎么设置,css圆角边框代码

    css圆角边框怎么设置,css圆角边框代码之前在介绍css盒子模型的时候,大概讲过边框border,边框border是其中一个重要组成部分。本篇将具体介绍边框的属性,border属性允许您指定元素边框的样式、宽度、颜色及圆角。CSS边框样...

  • css3旋转属性,css3旋转怎么做

    css3旋转属性,css3旋转怎么做

    css3旋转属性,css3旋转怎么做要玩转css3的3d,就必须了解几个词汇,便是透视(perspective)、旋转(rotate)和移动(translate)。透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果。旋转则不再是2...

  • css3阴影属性怎么设置,css3阴影属性有哪些

    css3阴影属性怎么设置,css3阴影属性有哪些

    css3阴影属性怎么设置,css3阴影属性有哪些。使用CSS3,你可以为文本和元素添加阴影。一、浏览器支持表中的数字指定完全支持该属性的第一个浏览器版本。数字后面的-webkit-或者-moz-使用时需要指定前缀。二、CSS3阴影的文字特效...

  • css3圆角可以设置几个值,css3圆角教程

    css3圆角可以设置几个值,css3圆角教程

    css3圆角可以设置几个值,css3圆角教程。页面元素的装饰一直是前端工程师的重要工作之一,在这若干样式之中有一个样式较为独特,那就是圆角属性。在CSS3前或是老版本的浏览器中要想实现圆角属性的难度较大,要么使用图片装饰,要么使用borde...

  • 周排行
  • 月排行
  • 年排行

精彩推荐