文章目录
一、css3文本,阴影
文本
文本换行
1)word-wrap: 属性用来标明是否允许浏览器在单词内进行断句
这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。
normal 只在允许的断字点换行(浏览器保持默认处理)。
break-word:在长单词或 URL 地址内部进行换行。将内容在边界内换行(不截断英文单词换行)。
会尽量保持单词完整性,一行放不下时会换行到下一行显示,如果下一行一整行都放不下才会换行显示
2)word-break:使用该属性自己决定自动换行的处理方法
normal:使用浏览器默认换行规则,根据语言自己的规则确定换行方式,中文到边界上的汉字换行,英文从整个单词换行
break-all:它断句的方式非常粗暴,它不会尝试把长单词挪到下一行,而是直接进行单词内的断句
简单粗暴,放下就换行,不会考虑保持单词的完整性
阴影
text-shadow 设置文本阴影
value1: 阴影水平位置 必需 接受正负值:正值阴影向右偏移,负值向左偏移
value2: 阴影垂直位置 必需 接受正负值:正值阴影向下偏移,负值向上偏移
value3: 阴影模糊距离 可选 只接受正值:值越大阴影越模糊
value4: 阴影颜色 可选 任何可以表示颜色的方式都可以书写
可以通过头号分隔的方式给元素的文本添加多个阴影
text-shadow: 50px 50px 5px red, -30px -30px 3px green, -50px 40px 2px blue;
存在多个文字阴影时,写在前面阴影显示在写在后面的阴影的上面
box-shadow 设置元素的阴影(盒子阴影)
value1: 阴影水平位置 必需 接受正负值:正值阴影向右偏移,负值向左偏移
value2: 阴影垂直位置 必需 接受正负值:正值阴影向下偏移,负值向上偏移
value3: 阴影模糊距离 可选 只接受正值:值越大阴影越模糊
value4: 阴影延展尺寸 可选 接受正负值:正值阴影向四周扩大,负值阴影向四周缩小
value5: 阴影颜色 可选 任何可以表示颜色的方式都可以书写
value6: 设置阴影为内阴影 可选 inset
可以通过头号分隔的方式给元素添加多个阴影
box-shadow: -100px -100px 0px 0px yellow inset,50px 50px 0px 0px pink,100px 100px green;
存在多个盒子阴影时,写在前面阴影显示在写在后面的阴影的上面
圆角属性
border-radius 设置检索圆角边框(圆角属性)
属性值: lenfth(数值+单位) %(根据元素的宽高计算得到的百分比值)
两个相邻的角设置圆角效果时,针对同一个边的设置最大值相加只能等于边长值,不能大于,如果大于也体现等于的效果
如果要重置元素没有圆角,取值none无效果,需要设置为0;
多个属性值书写: border-radius:
一个属性值:四个角
两个属性值:左上角+右下角 右上角+左下角
三个属性值:左上角 右上角+左下角 右下角
四个属性值:左上角 右上角 右下角 左下角
多个属性值设置水平边和垂直边值不一样: border-radius: 水平边值/垂直边值
一个属性值:水平边值(四个角) / 垂直边值(四个角)
两个属性值:水平边值(左上角+右下角 右上角+左下角) / 垂直边值(左上角+右下角 右上角+左下角)
三个属性值:水平边值(左上角 右上角+左下角 右下角) / 垂直边值(左上角 右上角+左下角 右下角)
四个属性值:水平边值(左上角 右上角 右下角 左下角) / 垂直边值(左上角 右上角 右下角 左下角)
单独书写一个角(方向)的圆角写法:
border-top/bottom-left/rihgt-radius: 属性值;
单独书写一个角(方向)的圆角的水平边值和垂直边值不一样写法:
border-top/bottom-left/rihgt-radius: 水平边值 垂直边值;
圆角属性特殊应用:
border-radius有个内半径和外半径的区别;
border-radius半径值小于或等于border-width(边框宽度)值时,圆角内角为直角;
border-radius半径值大于border-width(边框宽度)值时,圆角内角具有圆角效果,圆角内角的圆角半径为他们的差值;