层叠样式表--css（二）_b在css中表示颜色的方法不唯一，可以使用英文单词。比如我们利用white表示白色。-优快云博客

本文链接：https://blog.youkuaiyun.com/Rococoberry/article/details/102833397

本文详细介绍了CSS中颜色透明度、边框圆角、鼠标样式、定位、盒子模型等核心属性的使用方法，并提供了购物车代码示例，帮助读者深入理解并应用CSS样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一 CSS标签

1 颜色透明度

例如：红色：red/#f00/rgb(255,0,0);
带透明度的色彩值：rgba(255,0,0,0.5) 或者直接写成 opacity: 50%;

2 边框圆角

border-radius:圆角
border-radius值的不同意义：

值：a 表示四角都为相同的圆角状态
值：a b 表示左上，右下都为a，右上，左下都为b
值：a b c 表示左上为a 右上和左下为b 右下为c
值：a b c d 依次表示左上右上右下左下
值：50% 表示圆或椭圆

3 鼠标手状

cursor: pointer; /*鼠标图标成手状*/

4 定位

position 所有的定位和top right bottom left 联和一起起作用
position: relative;

relative 相对定位以默认位置为参考点进行移动，
absolute 绝对定位以最近定位元素为参考点进行移动
fixed 固定定位

定位中水平居中--position: absolute;
right:0;
left:0;
margin:auto;

4 盒子模型

宽：内容宽+border+margin+padding
box-sizing: border-box;
宽：width+margin (宽＝内容宽+border+padding)
图片格式： gif jpg png webp

5 一些其他用法

overflow:hidden; 溢出隐藏
:first-of-type 第一个同类型对象
:nth-of-type(n) 第n个同类型对象 n=数字 odd（奇数行） even（偶数行）
input{outline:none;} //去外边框线

二示例

购物车主要代码示例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .one{
            width: 150px;
            height: 40px;
            border:solid 1px black;
            position: relative;
            margin-left: 300px;
            margin-top: 20px;
            text-align: right;
        }
        div a{
            text-decoration: none;
            color: red;
            height: 40px;
            line-height: 40px;
            margin-right: 10px;
        }
        div span{
            background: darkred;
            color:white;
            padding: 0 5px;
            border-radius: 10px;
            display:inline-block;
            height: 17px;
            line-height: 17px;
            position: absolute;
            top:5px;
            left:40px;
        }
    </style>
</head>
<body>
<div class="one">
    <span>0</span>
    <a href="">我的购物车</a>
</div>
</body>
</html>