CSS3 之属性:calc() 函数、border、background、word-wrap、font-face

转角羊儿

已于 2023-02-18 09:07:29 修改

阅读量1.3k

点赞数

分类专栏： CSS3 文章标签： css3 css 前端

于 2023-01-07 17:28:32 首次发布

本文链接：https://blog.csdn.net/qq_41988669/article/details/128592615

版权

CSS3 专栏收录该内容

3 篇文章

订阅专栏

calc() 函数

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 “+”, “-”, “*”, “/” 运算；
calc()函数使用标准的数学运算优先级规则；

自动调整表单域的大小以适应其容器的大小

calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间，而不会在保持合适的外边距的同时，因挤压超出其容器的边缘。

以下实例中，form 元素自身使用了窗口可用宽度的 1/6，然后，为了让 form 元素内部的 input 元素保持合适的大小，我们再一次使用了 calc()，让它的宽度为其容器的宽度减 1em。下面的

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

#formbox {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}
</style>
</head>

<body>
<form>
  <div id="formbox">
  <label>Type something:</label>
  <input type="text">
  </div>
</form>
</body>
</html>

在这里插入图片描述

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值一致，但是会保留文本输入时的换行。