形状图像阈值 | shape-image-threshold (Shapes) – CSS 中文开发手册
形状图像阈值 | shape-image-threshold (Shapes) - CSS 中文开发手册
该shape-image-threshold CSS属性定义了使用图像作为shape-outside值时，用以提取形状的阿尔法通道（透明度通道）阈值。
值0.5意味着形状将包含所有超过50％不透明度的像素。
/* <number> value */ shape-image-threshold: 0.7; /* Global values */ shape-image-threshold: inherit; shape-image-threshold: initial; shape-image-threshold: unset;
|
Initial value |
0.0 |
|---|---|
|
Applies to |
floats |
|
Inherited |
no |
|
Media |
visual |
|
Computed value |
The same as the specified value after clipping the <number> to the range 0.0, 1.0. |
|
Animation type |
a number |
|
Canonical order |
the unique non-ambiguous order defined by the formal grammar |
语法
可用值
<number>设置用于从图像中提取形状的阈值。形状由alpha值大于阈值的像素定义。超出范围0.0（完全透明）到1.0（完全不透明）的阈值将被限制在此范围内。
形式语法
<number>
实例
HTML内容
<div id="gradient-shape"></div> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel at commodi voluptates enim, distinctio officia. Saepe optio accusamus doloribus sint facilis itaque ab nulla, dolor molestiae assumenda cum sit placeat adipisci, libero quae nihil porro debitis laboriosam inventore animi impedit nostrum nesciunt quisquam expedita! Dolores consectetur iure atque a mollitia dicta repudiandae illum exercitationem aliquam repellendus ipsum porro modi, id nemo eligendi, architecto ratione quibusdam iusto nisi soluta? Totam inventore ea eum sed velit et eligendi suscipit accusamus iusto dolore, at provident eius alias maxime pariatur non deleniti ipsum sequi rem eveniet laboriosam magni expedita? </p>
CSS内容
#gradient-shape {
width: 150px;
height: 150px;
float: left;
background-image: linear-gradient(30deg, black, transparent 80%,
transparent);
shape-outside: linear-gradient(30deg, black, transparent 80%,
transparent);
shape-image-threshold: 0.2;
}
结果
规范
|
Specification |
Status |
Comment |
|---|---|---|
|
CSS Shapes Module Level 1The definition of 'shape-image-threshold' in that specification. |
Candidate Recommendation |
Initial definition |
浏览器兼容性
|
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari (WebKit) |
|---|---|---|---|---|---|
|
Basic support |
(Yes) |
No support1 |
No support |
(Yes) |
7.0 -webkit |
|
Feature |
Android |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
|---|---|---|---|---|---|
|
Basic support |
(Yes) |
No support1 |
No support |
? |
? |
