css遮罩蒙版效果 分栏效果



<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> mask遮罩蒙版 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
img{-webkit-mask-image:url('2.png');}
</style>
<link href="" style="text/css" rel="stylesheet"/>
</head>
<body>
<img src="1.jpg"/>
</body>
</html>
img{
-webkit-mask-image:-webkit-radial-gradient(50% 50%,rgba(0,0,0,0),rgba(0,0,0,1));
}

-webkit-mask-position:70px 70px;
效果:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> column分栏效果 </title>
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
div{width:1000px;}
p{text-indent:2em;padding:0;margin:0;}
</style>
<link href="" style="text/css" rel="stylesheet"/>
</head>
<body>
<div>
<p>和平,使人类处于一种更近似的高度。我们内心的辉煌梦想似乎在这个乏英雄年代显得格格不入,只能在已逝的峥嵘岁月中艳羡那些曾经高大伟岸的身影。我们也许很难企及他们在特定历史环境中创造的丰功伟绩,但是在历史的暮色里,伟人们永不佝偻的却是他们高尚的人格和崇高的理想。</p>
<p>理想,是我们为自己确定的人生最大值,只有逐渐接近理想,才能够获得更为充盈的人生。那么,我们不妨将人生的最大值确定大一些,若伟人一般置心高处,以他们一样高远的视角来关注社会,用他们一样宽阔的胸襟去容纳世界。古人曾云:“虽不能至,心向往之”尽管我们可能最终不能如伟人一般求证出这个过大的最大值,但只要你曾执着以求,你便拥有了不断进取、无限延伸的人生。只要远处的那面高扬的理想之旗仍在招展,你就不会为取得一点小成就而自我满足、停步不前;也不会因身处逆境便自我消沉、萎畏退缩;更不会因身处恶境而同流合污、自甘堕落。</p>
<p>心在高处,不是欲扫天下而不扫一屋的好高骛远,目空一切。而使一种着眼大处、大度从容、胸襟开阔的人生境界。如此,你就不会变得鼠目寸光、患得患失、蝇营狗苟。一个拥有伟人般高尚品格和宽阔胸襟的人,也许依然平凡,但绝不会平庸。就像那灯火,再微弱,只要放于高处,便能最大限度的照耀别处。</p>
<p>心在高处,不是像尼采那样自诩为太阳似的自我膨胀、自命不凡。我们并不是要去刻意追求非凡,只是想让自己的一生在与理想的无限接近中变得无限充实丰盈。如果你的理想是成为太阳,那么就像太阳那样默默地燃烧发光,而不是像闪电那样,即使是瞬间的闪烁也要伴以震耳欲聋的雷声。</p>
<p>心在高处,不是自不量力、不切实际。我们明晓得自身的能力与理想之间的差距,甚至明白我们的步伐终不可能完全覆盖现实与理想之间的距离。我们以自身的具体行动一步一步地去接近它,即使不能完全达到那至美的境地,但至少,我们最大限度的接近了它。既然没有人注定成为伟人,那么,也就没有人注定成为平庸的屈膝于现实的现实主义者。那就做一只不知疲倦地飞向太阳的玄鸟吧,尽管总难抵临,也最大限度的接近了辉煌。</p>
<p>有志者,事未必成,但,尽吾力,然后无悔。</p>
<p>在顺境里不滞留,在逆境里不消沉,在恶境里不堕落,在绝境里不绝望,正是因为自己有一颗永远置于高处的不曾沦落的心。</p>
</div>
</body>
</html>

进行初步的分栏,分为3栏显示
div{width:1000px;
-webkit-column-count:3;}/*此句为新加内容*/

-webkit-column-gap:50px;/*控制每两个栏之间距离为50像素*/
-webkit-column-rule:5px dotted #00f;/*添加一条蓝色虚线分隔线,注意像素、样式和颜色之间均使用空格分隔开*/

【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述
2016-06-19 用面向对象的方式进行数据访问