发表于： 2019-09-22 18:58:09
2 920
box-shadow 属性
属性定义及使用说明
box-shadow属性可以设置一个或多个下拉阴影的框。
默认值: | none |
继承: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.boxShadow="10px 10px 5px #888888" |
语法
box-shadow: h-shadow v-shadow blur spread color inset;
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
| 值 | 说明 |
h-shadow | 必需的。水平阴影的位置。允许负值 |
v-shadow | 必需的。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的大小 |
color | |
inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
语法：
E {box-shadow: <length> <length> <length>?<length>?||<color>}
也就是：
E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
换句说：
对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
box-shadow和text-shadow一样可以使用一个或多个投影，如果使用多个投影时必须需要用逗号“，”
阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影；
X-offset:是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边；
Y-offset:是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部；
阴影模糊半径：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小
阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
遇到问题：需要浮动出现下拉菜单的元素，是用外边距实现垂直居中效果，浏览器不识别外边距，显示效果，默认外边距为空隙，下拉菜单不能一直存在，内边距实现范例效果原因，不能再用于垂直居中效果
解决：在外部再套一个盒子，把浮动显示效果设置在这个盒子上
收获：关于有交互功能的代码，外边距浏览器不识别，没有效果，还可能出bug，但是识别内边距，点在内边距范围能实现功能交互，如果出现不能用外边距的情况，部分可以外部再套一个盒子解决
（需要外套的元素，如果使行内元素，添加:display:black,避免出现不识别的情况）
任务7
首页
用css做一个三角形
首先我们创建一个带边框的div：
具体代码实现如下：
width: 40px;
height: 40px;
border-width: 40px;
border-style: solid;
border-color: red green blue brown;
然后我们将内部DIV的宽高设置为0
将其他的三个边框给取消点：
width: 0;
height: 0;
border-width: 40px;
border-style: solid;
border-color: red transparent transparent transparent;
利用更改border的边框，我们可以随意控制写出我们想要的三角形，通过控制边框的大小来实现三角形的大小，
通过控制边框的位置来改变三角形的位置。
使用上面的方式实现三角形有一个问题就是，三角形的方位不太好控制，但是使用其他的方式依然会面临这样的问题
遇到问题;知道三角形需要用绝对定位来做，但是不知道怎么做，才能用的数据最小，容易微调
原来的思考，作用于整个主体为对象
解决;问的师兄，作用与主体的一个子元素为对象，用负值来实现效果，
并且绝对定位独立于文档流，不影响原来子元素中的文本定位
思考：算是思维的盲点，没想过通过负值来实现，思维僵硬，属性不能灵活运用，
平时要多思考，多练习
收获：同上
明天计划:继续做任务七
返回列表
评论