响应式
除非在下面的文档中指定,否则可以为四个可用视口调整所有选项。
内容
- 样式
- 字体和图标
- 背景
- 间距/边框
- SVG样式
- 进阶风格
- 基本转换
- 框影
- 文字阴影
- 文字笔画
- 混合模式
- 尖刺面具
- 尖角扩展
- 相关话题
- 响应式设置
- 响应式设置
- 大小和位置
- 鼠标悬停
1.风格
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/layer-style-2.jpg)
1.1字体和图标样式
可以为“文字和按钮层”编辑“字体和图标样式”选项。
1.字体大小
设置文本的字体大小(以像素为单位)。
2.线高图层
的CSS线高。这对于多行文本很有用。
3.字体粗细
选择您的文本是否应为“粗体”。
4.字母间距
字母之间的可选间距。对某些字体系列有用。
5.字体家族
在数百种可用的Google字体之间进行选择。
6.文本颜色
设置图层文本的颜色。
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/font-icon-styling-2.jpg)
单击“更多”按钮以获取其他字体样式选项
1.斜体
选择是否以斜体显示文本。
2.文本修饰图层
的CSS文本修饰。
3.大写
选择该图层的CSS文本转换。
4.可选
选择是否可以由用户选择文本。
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/text-align-2.jpg)
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/layer-text-align-2.jpg)
1.2背景
1.背景颜色
将图层的背景设置为纯色或半透明的颜色或渐变。
2.背景
图像为图层设置可选的背景图像。
3.背景图像位置图像
的 CSS背景位置 。
4.背景图像大小图像
的 CSS背景大小 。建议使用“封面”。
5.背景图像重复图像
的 CSS背景重复 。对于常规图像,请使用“不重复”,对于图案类型的背景请使用“重复”。
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/layer-background-1.jpg)
1.3间距和边框
1.边距
设置图层的顶部/右侧/底部/左侧边距,如果希望无论响应度如何始终遵循这些值,请单击“锁定”按钮。
2.
填充设置图层的顶部/右侧/底部/左侧填充,然后单击“锁定”按钮(如果希望无论响应度如何都始终遵循这些值)。
3.边框颜色
设置可选边框的颜色。
4.边框样式
如果要显示图层的边框,请将其设置为“ solid”。
5.边框半径向图层
添加可选的CSS边框半径。
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/spacings-border-1.jpg)
1.4 SVG样式
注意 :
仅当您选择了SVG对象时,此选项才会显示
1. SVG颜色
设置SVG图标的主要颜色
2.笔触颜色
如果“笔触大小”设置为大于0px,则SVG笔触的颜色。
3.描边大小
svg描边在图形的图形内部和外部添加边框/轮廓。
4.笔划划线
将笔划转换为虚线。
5. 笔划破折号间距
如果笔划破折号设置为大于0,则破折号之间的间距。
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/svg-settings-1.jpg)
2.高级风格
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/advanced-style-1.jpg)
2.1基本转换
1.旋转X 向当前选定的图层
添加一个 rotateX变换
2.旋转Y 向当前选定的图层
添加一个 rotateY变换
3.旋转Z 向当前选定的图层
添加一个 rotateZ变换
4.不透明度
调整当前选定图层的不透明度/透明度
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/basic-trans-1.gif)
2.2盒子阴影
1.效果*
启用图层的阴影
2.阴影开*
选择是否将阴影应用于图层的主容器或图层的视差容器。
3. Offset-X
阴影的“ x”(水平)位置
4. Offset-Y
阴影的“ y”(垂直)位置。
5.模糊
阴影的模糊值。
6.传播
阴影的大小。必须具有大于“ 0”的值才能使阴影可见。
7.颜色*
框阴影的颜色。
*将全局应用于所有 自适应视口。
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/box-shadow-2-1.jpg)
CSS框阴影示例:
Offset-X |偏移量Y |模糊|传播颜色
框阴影:2px 2px 2px 1px rgba(0,0,0,0.2);
2.3文字阴影
可以为“文本”和“按钮层”编辑“文本阴影”选项。
1.效果*
为图层启用文本阴影
2. Offset-X
阴影的“ x”(水平)位置
3.偏移-Y
阴影的“ y”(垂直)位置。
4.模糊
阴影的模糊值。
5.颜色*
文本阴影的颜色。
*将全局应用于所有 自适应视口。
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/text-shadow-1.jpg)
CSS文本阴影示例:
Offset-X |偏移量Y |模糊|彩色
文本阴影:3px 3px 3px rgba(0,0,0,0.2);
2.4文字笔划
可以为“文字和按钮层”编辑“文字描边”选项。
1.效果*
启用图层的文字描边
2.笔触宽度
以px调整笔触效果的宽度。
3.笔触颜色*
文字笔触的颜色。
*将全局应用于所有 自适应视口。
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/text-stroke-1.jpg)
CSS文字描边示例:
宽度|彩色
笔画:1px rgba(0,0,0,0.2);
2.5混合模式
1.混合模式向图层
添加可选的CSS mix-blend-mode。
2.在编辑器中显示
如果要在管理编辑器视图中隐藏效果,请禁用此选项。
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/blend-mode-1.jpg)
2.6尖刺面具
1.左尖峰
将尖峰添加到图层的左侧。(需要背景颜色/图像)
2.左尖峰宽度
调整左尖峰的宽度
3.右尖峰宽度
将尖峰添加到图层的右侧。(需要背景颜色/图像)
4.右尖峰宽度
调整右尖峰的宽度
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/spike-mask-1.jpg)
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/spike-mask-eg-1.png)
2.7尖角扩展
1.
左上角在图层中添加一个尖锐的左上角。(需要背景颜色)
2.
右上角为图层添加一个右上角。(需要背景颜色)
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/sharp-corner-1.jpg)
![[Slider Revolution 6]调整图层内容的CSS样式 [Slider Revolution 6]调整图层内容的CSS样式](https://aladd.net//wp-content/uploads/2020/05/corner-sc-1.png)