一、background-size：
属性规定背景图像的尺寸。
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:url(/i/bg_flower.gif);
background-size:63px 100px;
-moz-background-size:63px auto; /* 老版本的 Firefox */
background-repeat:no-repeat;
padding-top:80px;
}
</style>
</head><body>
<p>上面是缩小的背景图片。</p><p>原始图片：<img src="/i/bg_flower.gif" alt="Flowers"></p></body>
</html>
二、css选择器[class^=“icon-“]、[class$=“icon-“]、[class*=“icon-“]
1、[class^="icon-"]
a[href^="https"] 表示：<a> 元素、href 属性值以 "https" 开头的
[class^="icon-"] 表示：class属性 以 icon- 开头的所有元素。
注意：双引号可省略。[class^="icon-"] 和 [class^=icon-] 效果一样。
2、[href$=".pdf"]
a[href$=".pdf"] 表示：href 属性值以 “.pdf” 结束的 <a>元素。
[class$="icon-"] 表示：class属性值以“icon-”结尾的所有元素。
3、[href*="icon"]
a[href*="abc"] 表示：href 属性值包含 “abc” 字符的所有 <a>元素。
[class*="icon-"] 表示：class属性值包含“icon-”的所有元素。
总结：^= 是开头； $= 是结束；*= 是包含。
三、transform
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
使用transform 设置容器水平居中
.search-index {max-width: 540px;min-width: 320px;/* 固定定位以屏幕为准 */position: fixed;/* background-color: pink; */width: 100%;left: 50%;top: 0%;height: 44px;/* transform 允许旋转，缩放，倾斜或平移给定元素 *//* 兼容webkit内核浏览器 */-webkit-transform: translateX(-50%);transform: translateX(-50%);display: flex;align-items: center;}使用transform 制作三角形
<style>.arrow {width: 7px;height: 7px;border-top: 2px solid #000;border-right: 2px solid #000;transform: rotate(45deg);}</style><div class="arrow"></div>四、背景色渐变：
background: -webkit-linear-gradient()
<style>.search {width: 300px;height: 70px;border: 1px solid #000;/* background: -webkit-linear-gradient(left, blue, green); */background: -webkit-linear-gradient(45deg, red , blue);/* background: -webkit-linear-gradient(top left, red , blue); */}</style><div class="search"></div>
![[动画详解]LeetCode151.翻转字符串里的单词](http://pic.xiahunao.cn/[动画详解]LeetCode151.翻转字符串里的单词)
)
