css3的高级而有用且很少人知道的属性和样式

简介: 1、-webkit-mask概属性可以给一个元素添加蒙层,蒙层可以是一个渐变或者半透明的png图片,这张png图片的 alpha 为 0 的位置会不显示元素这部分,alpha 为 1 的位置会显示元素这部分。

1、-webkit-mask

概属性可以给一个元素添加蒙层,蒙层可以是一个渐变或者半透明的png图片,这张png图片的 alpha 为 0 的位置会不显示元素这部分,alpha 为 1 的位置会显示元素这部分。

 

 

 

 .element{
    background-image:url('bg.jpg');
    -webkit-mask:url('mask.png');
}

 

2、-webkit-text-stroke

可以给文字或者其他元素添加border ,可以设置颜色和宽度

 

*{
    -webkit-text-stroke:2px blue;
}

 

3、-webkit-tap-highlight-color

在 (iphone/ipad) 中,当链接触发或者onclick 事件触发时候,可以添加一个颜色

 

*{
    -webkit-tap-highlight-color: colorName;
}

 

4、 -webkit-box-flect

可以设置一个元素有一个倒影

 

*{
    -webkit-box-flect:below 5px
}

 

 

5、-webkit-marquee

跑马灯显示某元素

 

*{
    
}

 

6、user-select

禁止用户选择文本。

 

7、-webkit-text-size-adjust

取消最小字体限制

 

个人博客 : 很多有用的插件    https://gilea.cn/

 

 https://www.cnblogs.com/jiebba/p/9586200.html

 

 

相关文章
|
7天前
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点,适用于不同场景。
|
2天前
|
前端开发
css的渐变属性linear-gradient
css的渐变属性linear-gradient
|
2天前
|
前端开发
css <样式一>
css <样式一>
11 1
|
18天前
|
设计模式 移动开发 前端开发
CSS内联样式的使用,吐血整理
CSS内联样式的使用,吐血整理
31 6
|
23天前
|
前端开发 算法 开发者
CSS 的了解text-rendering属性
【8月更文挑战第24天】
|
23天前
|
XML 前端开发 数据格式
CSS常用样式及示例
CSS常用样式及示例
|
28天前
|
前端开发 搜索推荐 UED
浅谈css的cusor属性
浅谈css的cusor属性
30 1
|
29天前
|
前端开发
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
CSS动画变形宝典:Transform属性,打造动态视觉盛宴!
|
20天前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
34 0
|
20天前
|
前端开发 JavaScript 开发者
【前端革新力】React与CSS-in-JS完美邂逅:从styled-components到emotion,全面解析样式管理新趋势的实战应用与优势剖析!
【8月更文挑战第31天】CSS-in-JS 作为一种新兴的样式管理方式,近年来在前端社区受到广泛关注。它将样式嵌入 JavaScript,实现了样式与逻辑的高度耦合,提升了开发效率并解决了全局样式污染等问题。本文通过具体代码示例,探讨 CSS-in-JS 在 React 开发中的应用,并分享实践心得。首先介绍了 CSS-in-JS 的基本概念,然后详细展示了如何使用 styled-components 和 emotion 这两个流行库创建样式化组件。
29 0