网站地图    收藏   

主页 > 专题教程 > css >

inset()

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

[导读] CSS inset()函数是一个图形函数,用于指定某种基本图形basic-shape类型。inset()函数用于定义矩形。...

CSS inset()函数是一个图形函数,用于指定某种基本图形类型。inset()函数用于定义矩形。

CSS 代表一种基本图形,它通过图形函数来定义一个图形。一个基本图形可以作为shape-outside属性,或属性的参数使用,经这些属性应用在一个元素上,可以使这个元素周围的内容环绕在它的周围,或者使用指定的图形来剪裁内容。

inset()函数的语法如下:

inset() = inset( [offset]{1,4} [round <border-radius>]? )
/* 其中.. */
offset = <length> | <percentage>

inset()函数指定一个inset类型的矩形。它的参数为4个偏移值,用于指定矩形4条边在参考盒模型各个方向上的偏移。

4个偏移值的取值方式和相同,如果只给出一个值,那么上右下左4条边都使用这个值作为偏移值。如果给出3个值,那么第一个值代表上边部的偏移值,第二个值代表左右边部的偏移值,第三个值代表下边部的偏移值。如果给出2个值,那么第一个值代表上下边部的偏移值,第二个值代表左右边部的偏移值。如果给出了4个值,那么它们分别代表上右下左4条边的偏移值。

除了4个偏移值,inset()函数还有一个可选的<border-radius>参数,用于指定矩形的圆角。它的语法格式和属性相同。如果要指定圆角,必须带上round关键字。

下面都是有效的inset()函数声明。

inset(10% 20% round 5px); 
/*一个带5像素圆角的矩形,上下2条边向内10%,左右2条边向内20%*/

inset(15px 20px 30px); 

inset(25% round 10px 30px);

inset(10px 20px 30px 40px round 10px);                                              
浏览器支持

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论