CSS3 之属性

news2025/1/23 9:28:50

文章目录

- - calc
  - border
  - box-shadow
  - background-image
  - - 垂直渐变
    - 水平渐变
    - 左上角渐变
    - 渐变方向写法组合
  - background-clip
  - background-attachment
  - word-wrap:break-word：允许长单词换行到下一行;
  - word-wrap:
  - word-break：
  - text-shadow
  - 3、字体
  - white-space 设置如何处理元素内的空白。
  - text-align-last 规定如何对齐文本的最后一行。
  - letter-spacing：normal|<length>
  - text-indent

calc

条件

1. Position:absolute;

2.  减号两边要有空格

水平居中：left:calc(50%-50px)
垂直居中：top:calc(50%-50px)

div{
width:100px;
height:100px;
border:1pxsolidgray;
position:absolute;
left:calc(50%-50px);
top:calc(50%-50px); 
border-radius:10px20px30px40px;                                                
}

border

border-radius:10px20px30px40px;

与下面代码相等

2.border-radius:10px20px30px;—>右上与左下相等

3.border-radius:10px20px;—>对角相等

4、圆的最大值可以使一个正方形变成一个扇形

eg:border-top-left-radius:100px100px;  // 圆的半径等于正方形的边长

box-shadow

外阴景

box-shadow:0px0px0px0px#off;

x轴移动的距离、轴移动的距离、模糊值阴影扩大距离、阴影颜色

内阴影

box-shadow:inset0px0px0px0px#off;

设置spread值，阴影是以边界外扩展，没有设置就是边界两边扩展


div {
            position: absolute;
            border-radius: 5px;
            left: calc(50% - 50px);
            top: calc(50% - 50px);
            width: 100px;
            height: 100px;
            background-color: #fff;
            box-shadow: 0px 1px 2px rgba(0, 0, 0, .1);
            transition: all.6s;
        }

        div::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 5px;
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
            opacity: 0;
            transition: all.6s;
        }

        div:hover {
            transform: scale(1.25, 1.25);
            /*使变大*/
        }

        div:hover::after {
            opacity: 1;
        }

在这里插入图片描述

background-image

使用绝对或相对地址指或者创建渐变色来确定图像。

垂直渐变

background:linear-gradient(red,yellow);

红黄条纹效果。
在这里插入图片描述

水平渐变

{background-image:linear-gradient(left,red100px,yellow200px);}

效果如下图：

在这里插入图片描述

左上角渐变

那从(100px,100px)到(200px,200px)应该就是从左上角开始，写法如下：

{background-image:linear-gradient(lefttop,red100px,yellow200px);}

效果如下

在这里插入图片描述

渐变方向写法组合

left,right,top,bottom,lefttop,leftbottom,righttop,right，bottom
分别表示，从左往右，从右往左，从上往下，从下往上，从左上往右下，从……（都懂的，不全写了）

当然，也可以用angle角度来写！

{background-image:linear-gradient(-45deg,red100px,yellow200px);}

具体的样式大家可以尝试着写一下，看一下！很多情况下，用了才知道！

注意：有不少效果加了-webkit前缀以及-moz前缀会展现的不一样！

例如：

background-image:-webkit-linear-gradient(-45deg,red,yellow)

与

background-image:linear-gradient(-45deg,red,yellow)

在Chrome浏览器下的渐变方向居然是相反的！但是45deg是正常的。Firefox浏览器下也是如此，有前缀和没有前缀方向相反！咋回事？

原因很简单，CSS3目前还是草案阶段！

从浏览器去掉前缀前后的变化可以推测，之前，W3C的渐变坐标是与photoshop中一致的，但是，后来，由于某些原因，修改了。

至于什么原因，根据我草草的查找，可能与下面几个关键字之一有联系：animation/transition动画、write-mode书写方向、flexbox模型、以及radial-gradient渐变等。在这里就不深入研究了！

基本的写法如下：

background-image:linear-gradient(top,#fff,#dededc);
//但是为了兼容，有时候要写多个前缀，变成如下：
background-image:-ms-linear-gradient(top,#fff,#dededc);
background-image:-moz-linear-gradient(top,#fff,#dededc);
background-image:-webkit-gradient(linear,lefttop,leftbottom,from(#fff),to(#dededc));
background-image:-webkit-linear-gradient(top,#fff,#dededc);
background-image:-o-linear-gradient(top,#fff,#dededc);
background-image:linear-gradient(top,#fff,#dededc);

background-clip

指定对象的背景图像向外裁剪的区域。

border-box：从border区域（含border）开始向外裁剪背景。
padding-box：从padding区域（含padding）开始向外裁剪背景。
content-box：从content区域开始向外裁剪背景。
text：从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果

background-attachment

fixed：背景图像相对于视口（viewport）固定。
scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
local：背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容。

word-wrap:break-word：允许长单词换行到下一行;

word-wrap:

在这里插入图片描述

word-break：

在这里插入图片描述

区别就是长单词在word-wrap作用下换到下一行，后面可以正常换行，word-break的作用下利用了上一行没有用完的空间。

text-shadow

浮雕效果：text-shadow:1px1px#000,-1px-1px#fff;
镂刻效果：text-shadow:-1px-1px#fff，1px1px#000;

2、text-shadow:0px0px10px#f00,

0px 0px 20px #f10,
0px 0px 30px #f20,
0px -5px 20px #f10,
0px -10px 20px #f20,
0px -15px 30px #f10,
0px -20px 40px #f20;

3、字体

下载外部的字体包

@font-face{font-family:‘abc’;src:rul();}

二个属性：
font-family:'abc'-->字体名称
src:url();--->引用地址

调用：div{font-family:'abc';}

你需要同时提供4种格式的字体

@font-face{
font-family:'diyfont';
src:url('diyfont.eot');/*IE9+*/
src:url('diyfont.eot?#iefix')format('embedded-opentype'),/*IE6-IE8*/
url('diyfont.woff')format('woff'),/*chrome、firefox*/
url('diyfont.ttf')format('truetype'),/*chrome、firefox、opera、Safari,Android,iOS4.2+*/
url('diyfont.svg#fontname')format('svg');/*iOS4.1-*/
}

white-space 设置如何处理元素内的空白。

white-space：normal|pre|nowrap|pre-wrap|pre-line

normal：默认处理方式。会将序列的空格合并为一个，内部是否换行由换行规则决定。
prez原封不动的保留你输入时的状态，空格、换行都会保留，并且当文字超出边界时不换行。等同pre元素效果
nowrap：与normal值一致，不同的是会强制所有文本在同一行内显示。
pre-wrap：与pre值一致，不同的是文字超出边界时将自动换行。
pre-line：与normal值一致，但是会保留文本输入时的换行。