CSS中的text-fill-color和text-stroke属性详解
最编程
2024-08-10 11:33:17
...
顾名思义“text-fill-color”就是文字填充颜色而“text-stroke”就是文字描边。还别说,两个属性可以制作出各种炫酷的文字效果,不过IE系列都不支持,不过好在webkit都支持良好。
text-fill-color:color;
<style> h1{ -webkit-text-fill-color:red; } </style> <h1>博客园</h1>
话说倒有点像color了,这种情况下倒是和color真的是一样的。
得注意一下:如果同时设置了text-fill-color和color那么color不会起作用。
h1{ -webkit-text-fill-color:red; color:green; }
text-stroke:width color;
<style> h1{ -webkit-text-stroke:1px red; } </style> <h1>博客园</h1>
好像这两个单独使用没有啥亮点,但如果结合起来使用那就不一样了。
text-stroke + text-fill-color制作文字镂空效果
<style> body{ background-color:#000; } h1{ font-size:60px; -webkit-text-fill-color:transparent; -webkit-text-stroke:1px #fff; } </style> <h1>博客园</h1>
原来就是设置边框为白色然后然文字颜色透明,背景颜色黑色,也就是黑白对比,自然文字就只能看见边框了。
如果再结合一下“background-clip”那就更强大了。
background-clip:text结合text-fill-color制作文字渐变效果
h1{ font-size:60px; background: linear-gradient(to bottom,#FCF,#000); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
注意:background-clip必须放在background后面不然不起作用,之所以要用background是因为text-fill-color不能使用linear所以只好借助background了。
background-clip:text会将背景作为文字区域裁剪。
<style> h1{ font-size:60px; background: url(bg.jpg) repeat; -webkit-background-clip:text; -webkit-text-fill-color:transparent; } </style> <h1>博客园</h1>
利用animation制作文字遮罩动画效果
<style> h1{ font-size:60px; background: url(bg.jpg) repeat; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:fn 5s alternate infinite; } @keyframes fn{ 0%{ background-position:0px 0px; } 20%{ background-position:30% 0px; } 50%{ background-position:50% 0px; } 70%{ background-position:70% 0px; } 100%{ background-position:100% 0px; } } </style> <h1>博客园</h1>
待续...
上一篇: 用CSS text-emphasis提升文字的视觉效果
下一篇: 探究CSSText的不同之处
推荐阅读
-
CSS中的text-fill-color和text-stroke属性详解
-
深入了解 CSS 中位置的属性和特征
-
了解 css 中的 position 和 z-index 属性
-
关于 CSS 中的 Position 和 Float 属性的一些见解
-
理解CSS中的line-height和vertical-align属性
-
玩转Java底层:JMX详解 - jconsole与自定义MBean监控工具的实际应用与区别" 在日常JVM调优中,我们熟知的jconsole工具通过JMX包装的bean以图形化形式展示管理数据,而像jstat和jmap这类内建监控工具则由JVM直接支持。本文将以jconsole为例,深入讲解其实质——基于JMX的MBean功能,包括可视化界面上的bean属性查看和操作调用。 MBeans在jconsole中的体现是那些可观察的组件属性和方法,如上图所示,通过名为"Verbose"的属性能看到其值为false,同时还能直接操作该bean的方法,例如"closeJerryMBean"。 尽管jconsole给我们提供了直观的可视化界面,但请注意,这里的MBean并非固定不变,开发者可根据JMX提供的接口将自己的自定义bean展示到jconsole。以下步骤展示了如何创建并注册一个名为"StudyJavaMBean"的自定义MBean: 1. 首先定义接口`StudyJavaMBean`,接口需遵循MBean规范,即后缀为"MBean"且包含getter方法代表属性,如`getApplicationName`,和无返回值的setter方法代表操作,如`closeJerryMBean`。 ```java public interface StudyJavaMBean { String getApplicationName(); void closeJerryMBean(); } ``` 2. 编写接口的实现类`StudyJavaMBeanImpl`,实现接口中的方法: ```java public class StudyJavaMBeanImpl implements StudyJavaMBean { @Override public String getApplicationName() { return "每天学Java"; } @Override public void closeJerryMBean() { System.out.println("关闭Jerry应用"); } } ``` 3. 在代码中注册自定义MBean,涉及的关键步骤包括: - 获取平台MBeanServer - 定义ObjectName,指定唯一的MBean标识符 - 注册MBean到服务器 - 启动RMI连接器服务,以便jconsole能够访问 ```java public void registerMBean() throws Exception { // ... 具体实现省略 ... } ``` 实际运行注册后的MBean,您将在jconsole中发现并查看自定义bean的属性和调用相关方法。然而,这种方式相较于传统的属性/日志查看和HTTP接口,实用性相对有限,可能存在潜在的安全风险。但不可否认的是,JMX及其MBean机制对于获取操作系统信息、内存状态等关键性能指标仍然具有重要价值。例如: 1. **获取操作系统信息**:通过JMX MBean,可以直接获取到诸如CPU使用率、操作系统版本等系统级信息,这对于资源管理和优化工作具有显著帮助。
-
理解CSS中的背景属性:url()函数和no-repeat, right, center的用法
-
详解CSS中的text-align属性,以及如何居中行内元素和块级元素。