clip-path:url(resources.svg#c1); /* <geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path:inset(100px50px)...
clip-path: url(resources.svg#c1); /* <geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path: inset(100px 5...
border-box:使用border box作为引用框。 padding-box:使用padding box作为引用框。 content-box:使用content box作为引用框。 fill-box:利用对象边界框作为引用框。 stroke-box:使用笔触边界框(stroke bounding box)作为引用框。 view-box:使用最近的 SVG 视口(viewport)作为引用框。 如果viewBox属性被指定来为元素创...
stroke-box:使用描边bounding box作为参考。 view-box:如果没有viewBox被指定,使用最近的SVG视口作为参考BOX。如果指定某个viewBox,那么通过viewbox的原点和尺寸来建立坐标系。 如果你为SVG元素使用任何的CSS的盒模型box来作为参考box,fill-box将被使用。反之,如果你在HTML元素上使用任何的SVG参考BOX,border-box将被...
shape-outside: margin-box :定义一个由外边距的外边缘封闭形成的形状。 shape-outside: border-box :定义一个由边界的外边缘封闭形成的形状。 shape-outside: padding-box :定义一个由内边距的外边缘封闭形成的形状。
svg#c1); /* <geometry-box> values */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path: inset(100px 50px); clip-path: circle...
clip-path: border-box clip-path: padding-box clip-path: content-box 它们和shape-outside的区域范围定义比较类似。 clip-path: circle() clip-path: ellipse() clip-path: inset() 它们和shape-outside的绘制形状比较类似。 开始尝试 有了shape-outside和clip-path我们不仅可以让行内元素产生不同的形状(影...
<geometry-box>: fill-box | stroke-box | view-box | margin-box | border-box | padding-box | content-box 初始值: none 应用于: 所有元素 继承性: 无 各形状语法: Circle: circle(radius at x-axis y-axis) Ellipse: ellipse(x-rad y-rad at x-axis y-axis) Polygon: polygon(x-axis y-...
clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> values */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: ellipse...
clip-path: stroke-box; clip-path: view-box; clip-path: margin-box clip-path: border-box clip-path: padding-box clip-path: content-box 这个网站可以生成常用的路径裁切:【clippy】。 项目实战1: 创建群组时,2人群组需要放置2张用户头像到头像的位置。