css常用语法汇总

duansamve

已于 2024-05-14 22:35:36 修改

阅读量367

点赞数 1

分类专栏： css 文章标签： css

于 2024-05-14 21:30:37 首次发布

本文链接：https://blog.csdn.net/duansamve/article/details/138869976

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一、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>