CSS Shapes
2024-10-19 05:00:30
CSS Shapes
shape-outside & shape-image-threshold
<img class=”element” src=”image.png” />
<p>Lorem ipsum…</p>
<style>
.element{
shape-outside: url(image.png);
shape-image-threshold: 0.5;
float: left;
}
</style>
https://www.html5rocks.com/en/tutorials/shapes/getting-started/
clip-path
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
mask & mask-borde
https://www.html5rocks.com/en/tutorials/masking/adobe/
img:hover {
clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
animate: star 3s;
}
@keyframes star {
0% {
clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
},
100% {
clip-path: polygon(0px 208px, 146.5px 207px, 147px 141.2px, ...);
}
}
img {
-webkit-mask-box-image: url("stamp.svg") 35 repeat;
mask-border: url("stamp.svg") 35 repeat;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/mask
https://developer.mozilla.org/en-US/docs/Web/CSS/mask-image
refs
xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
最新文章
- 《深入理解 java虚拟机》学习笔记
- 操作TAB文件和TStringGrid赋值；
- Webkit CSS properties
- HTML5——播放器
- jira-cli,api,git,jenkins--version.txt
- C++向量(Vector)
- HDU 4493 Tutor（精度处理）
- JDBC连接Oracle数据库的问题
- hdoj 2102 A计划
- iptables 规则预设置为新centos系统
- Restful 和 Jersey介绍（Web Service ）
- Unity3D之Vector3.Dot和Vector3.Cross采用
- Java数据结构系列——简单排序：泡、选择、直接进入
- python 发送post和get请求
- 网上搜集python面试题（更新中......）
- leveldb 学习记录(一) skiplist
- 【工具相关】Web-Sublime Text2的用法（一）
- React 中 keys 的作用是什么？
- Vue之数据监听存在的问题
- oracle创建、删除 数据库、建立表空间以及插入 删除 修改表