CSS标题样式

love2wind

<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 10px; line-height: normal; clear: both; font-family: Arial; font-size: 21px; font-weight: 400; color: rgb(255, 255, 255); padding: 1rem 2rem; background-image: linear-gradient(to right, rgb(250, 112, 154) 0%, rgb(254, 225, 64) 100%); outline: 0px !important; -webkit-text-stroke-color: initial !important;">
    渐变背景标题
</h2>

渐变背景标题

h2 {
  padding: 1rem 2rem;
  color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#fa709a), to(#fee140));
  background-image: -webkit-linear-gradient(left, #fa709a 0%, #fee140 100%);
  background-image: linear-gradient(to right, #fa709a 0%, #fee140 100%);
}

圆角渐变背景标题

<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 10px; line-height: normal; clear: both; font-family: Arial; font-size: 21px; font-weight: 400; color: rgb(255, 255, 255); padding: 1rem 2rem; border-radius: 10px; background-image: linear-gradient(to right, rgb(248, 54, 0) 0%, rgb(249, 212, 35) 100%); outline: 0px !important; -webkit-text-stroke-color: initial !important;">
    圆角渐变背景标题
</h2>

h2 {
  padding: 1rem 2rem;
  color: #fff;
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left top, right top, from(#f83600), to(#f9d423));
  background-image: -webkit-linear-gradient(left, #f83600 0%, #f9d423 100%);
  background-image: linear-gradient(to right, #f83600 0%, #f9d423 100%);
}

大圆角渐变背景标题

<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 10px; line-height: normal; clear: both; font-family: Arial; font-size: 21px; font-weight: 400; color: rgb(255, 255, 255); padding: 1rem 3rem; border-radius: 100vh; background-image: linear-gradient(to left, rgb(155, 225, 93) 0%, rgb(0, 227, 174) 100%); outline: 0px !important; -webkit-text-stroke-color: initial !important;">
    大圆角渐变背景标题
</h2>

h2 {
  padding: 1rem 3rem;
  color: #fff;
  border-radius: 100vh;
  background-image: -webkit-gradient(linear, right top, left top, from(#9be15d), to(#00e3ae));
  background-image: -webkit-linear-gradient(right, #9be15d 0%, #00e3ae 100%);
  background-image: linear-gradient(to left, #9be15d 0%, #00e3ae 100%);
}

倾斜渐变背景标题

<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 10px; line-height: normal; clear: both; font-family: Arial; font-size: 21px; font-weight: 400; color: rgb(255, 255, 255); padding: 1rem 3rem; transform: skew(-15deg); background-image: linear-gradient(to right, rgb(32, 156, 255) 0%, rgb(104, 224, 207) 100%); outline: 0px !important; -webkit-text-stroke-color: initial !important;">
    倾斜渐变背景标题
</h2>

h2 {
  padding: 1rem 3rem;
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#209cff), to(#68e0cf));
  background-image: -webkit-linear-gradient(left, #209cff 0%, #68e0cf 100%);
  background-image: linear-gradient(to right, #209cff 0%, #68e0cf 100%);
}

金属质感背景标题

<h2 style="box-sizing: inherit; margin-top: 0px; margin-bottom: 10px; line-height: normal; clear: both; font-family: Arial; font-size: 21px; font-weight: 400; color: rgb(3, 3, 3); padding: 1rem 2rem; border-width: 4px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-color: rgb(216, 220, 220) rgb(102, 102, 102) rgb(51, 51, 51) rgb(134, 136, 136); border-radius: 0px; background-image: linear-gradient(-45deg, rgb(204, 204, 204) 0%, rgb(134, 136, 136) 20%, rgb(216, 220, 220) 34%, white 53%, rgb(204, 204, 204) 100%); outline: 0px !important; -webkit-text-stroke-color: initial !important;">
    金属质感背景标题
</h2>

h2 {
  padding: 1rem 2rem;
  border-top: 4px solid #d8dcdc;
  border-right: 4px solid #666;
  border-bottom: 4px solid #333;
  border-left: 4px solid #868888;
  border-radius: 0;
  background-image: -webkit-linear-gradient(135deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
  background-image: linear-gradient(-45deg, #ccc 0%, #868888 20%, #d8dcdc 34%, white 53%, #ccc 100%);
}

love2wind

CSS background属性的使用方法

CSS的background 是一个指定元素背景的属性。

网页的背景主要是通过“着色”和“插入图像”来制作的。

background属性的种类

background-color：… 颜色

background-image：… 背景图片

background-size：… 背景图片尺寸

background-repeat：… 如何重复背景图片

background-position：… 指定背景图片的位置

background-attachment：… 设置背景图像是否固定

background-color … 颜色

CSS中，颜色值通常以以下方式定义:

十六进制 – 如：background-color:#00ff00;
RGB – 如：background-color:rgb(255,0,255);
颜色名称 – background-color: skyblue;

其中十六进制的颜色编码可以缩写。

比如黑白，「#000000」「#ffffff」

#000000 → #000
#ffffff → #fff

这种也可以。
#009944　→　#094

background-image：… 背景图片

background-image 属性用来设置一个元素的背景图像。

background-image:url("...");

也可以加入多张图片，在中间加个逗号即可。

background-image: url("01.png"),
    url("02.jpg");

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，可以使用背景色带代替。

background-size：… 背景图片尺寸

background-size: 100px; 200px;

具体数值以外的值也可以。

cover：保持图像的纵横比，并将图像缩放成将完全覆盖背景定位区域的最小大小。

contain：保持图像的纵横比，并将图像缩放成将适合背景定位区域的最大大小。

background-repeat：… 如何重复背景图片

默认状态下，背景图像将向垂直和水平方向重复。

如果不想让它重复的话……

background-repeat: no-repeat;

只有水平位置会重复背景图像……

background-repeat: repeat-x;

只有垂直位置会重复背景图像……

background-repeat: repeat-y;

background-position

background-position属性设置背景图像的起始位置。

默认值是左上角，top left。

  background-position: center;   /* 正中央 */

  background-position: right;   /* 右侧居中 */

  background-position: left;   /* 左侧居中 */

  background-position: top center;   /* 顶部居中 */


  background-position: top right;   /* 右上角 */

  background-position: bottom center;   /* 底部居中 */

  background-position: left bottom;   /* 左下角 */

  background-position: right bottom;   /* 右下角 */

如果只指定一个词，另一个将会是”center”。

还可以通过”px”或”%”设置精确位置。

x% y% : 第一个值是水平位置，第二个值是垂直。

左上角是0％0％。右下角是100％100％。

如果仅指定了一个值，其他值将是50％。

默认值为：0％0％

background-position: top 50px right 120px;

background-attachment：… 设置背景图像是否固定

默认值是scroll。背景图片随着页面的滚动而滚动。

fixed：背景图片不会随着页面的滚动而滚动。

local：背景图片会随着元素内容的滚动而滚动。

love2wind

官方QQ群

官方TG群

微信公众号