学无先后,达者为师

网站首页 编程语言 正文

CSS复合型写法

作者:Trine_cui 更新时间: 2022-07-21 编程语言

CSS中的常用复合写法    

  • 字体属性的复合写法
    • 外边距(margin)的复合写法
    • 内边距(padding)的复合写法
    • 边框的复合写法
    • 背景图片的复合写法
    • 边框圓角border-radius
    • 盒子阴影box-shadow:

表格常用的属性:

属性 含义
cellpadding=“5px” 表格内容和单元格边缘之间的距离为5px
cellspacing=“0” 单元格之间的距离
border-collapse: collapse 合并相邻的边框
colspan=“2” 合并行
rowspan=“2” 合并列

字体属性

font:font-style font-weight font-size/line-height font-family; 

背景图片的复合写法:

background: black url(“images/logo.jpg”) no-repeat fixed center top;

边框的复合写法:

border:5px solid red;

内(外)边距的复合写法:

写法 说明
padding: 1px; 一个参数,说明上下左右都有1像素的内边距
padding: 1px 2px; 两个参数,说明上下内边距是1像素,左右内边距是2像素
padding: 1px 2px 3px; 三个参数,说明上内边距是1像素,左右内边距是2像素,下内边距是3像素
padding: 1px 2px 3px 4px; 四个参数,此时按顺时针方向匹配值,上内边距是1像素,右内边距是2像素,下内边距是3像素,左内边距是4像素

背景图片的复合写法

背景图片的复合写法:
background: black url(“images/logo.jpg”) no-repeat fixed center top;

边框圆角border-radius:

       左上角,右上角,右下角,左下角。

盒子阴影box-shadow:

  box-shadow:h-shadow, v--shodow, blur, spread, color

box-shadow: 水平阴影,垂直阴影, 虚实,阴影大小, 颜色(写成透明)

 文字阴影text-shadow:

text-shadow: h-shadow v-shadow blur color;

原文链接:https://blog.csdn.net/weixin_46253682/article/details/125103929

栏目分类
最近更新