多数人使用box-shadow的方法是，指定三个长度值和一个颜色值

box-shadow: 2px 3px 4px rgba(0,0,0, .5);

这句话的意思就是：

1. 以该元素相同的尺寸和位置，画一个rgba(0,0,0, .5)的矩形．
2. 把它右移２px，向下移３px
3. 使用高斯模糊算法或类似算法将它进行４px的模糊处理．这在本质上表示在阴影边缘发生阴影色和纯透明色之间的颜色过度，近似于模糊半径的两倍，比如在这里就是８px.
4. 接下来，模糊后的矩形与原始元素的交集部分会被切除掉，因此它看起来像是在该元素的后面．

使用４px的模糊半径意味着投影的尺寸会比元素本身的尺寸大约８px（上下左右各4px），因此投影的最外圈会从元素外显露出来．所以我们只需要改变偏移量，就可以把投影的顶部和左侧隐藏起来，只要这两个方向上的偏移量不小于4px就可以。

box-shadow: 5px 5px 4px rgba(0,0,0, .5);

但是这样的话，在某种程度上会导致外露的投影太过浓重，看起来不美观。

另外就算勉强可以接受，我们想要的是单侧投影，而不是相邻的两侧。

最终的解决方案是box-shadow的第四个长度参数，它是扩张半径：

这个参数会根据你指定的值去扩大或（当指定负值时）缩小投影的尺寸。

举例来说，一个-5px的扩张半径会把投影的宽度和高度缩小10px - 每边各5px。因此如下时，完全没有投影：

box-shadow: 0px 0px 4px -4px rgba(0,0,0, .5);

所以，此时给投影一个正的垂直偏移量就会产生单侧投影：

box-shadow: 0px 5px 4px -4px rgba(0,0,0, .5);

如果把单侧投影的方式运用两次就会得到双侧投影：

      box-shadow: 0px 5px 4px -4px rgba(0,0,0, .5),
                  0px -5px 4px -4px rgba(0,0,0, .5);

最后是实验的全部代码

用快捷键

在视图之间切换 Ctrl+反斜杠

转至上一个视图 Ctrl+Shift+

显示/隐藏面板 Tab

指定一星级 Ctrl+‘

增加缩览图大小 Ctrl+加号

减小缩览图大小 Ctrl+减号

逐步增加缩览图大小Ctrl+Shift+加号

逐步减小缩览图大小Ctrl+Shift+减号

上移一个文件夹（在“文件夹”面板中或一行）向上箭头键

下移一个文件夹（在“文件夹”面板中或一行）向下箭头键

上移一级（在“文件夹”面板中）Ctrl+向上键

左移一个项目向左箭头键

右移一个项目向右箭头键

移动到第一个项目 Home

移动到最后一个项目End

添加到选区（不连续） 按住 Ctrl 键单击

刷新内容面板F5

将项目添加到选区 Shift + 向右箭头键、向左箭头键、向上箭头键或向下箭头键

显示帮助 F1

重命名下一个（在“内容”面板中选择了文件名） Tab

重命名上一个（在“内容”面板中选择了文件名） Shift + Tab

Adobe Bridge cs6使用方法

一、先看Bridge的工作界面(对话框)

二、从建档开始吧

1、建档1_将图片从存储卡导入(方法1)：在文件夹找到存储卡路径，在过滤器勾选条件选项，使用Shift键+鼠标左键选择图片，拖入已建好的文件夹

建档1_将图片从存储卡导入(方法2)：通过过滤器找到对应图片，选中，鼠标右键菜单：移动到-选择文件夹-新建文件夹(命名)-确定

2、筛选照片_浏览方式(1)：在快速菜单栏选[看片台]，选中图片，按空格键即可满屏审阅

3、筛选照片_浏览方式(1)：在画面上点击左键，即可放大100%，再次点击，恢复满屏，此操作也可滚轮缩放

4、筛选照片_浏览方式(1)：按数字1-5键，可以加星标注;按数字6-9键，可以加彩色标签(在缩览图上加标签或星号是Ctrl键+数字键)

5、筛选照片_浏览方式(1)：按四向键可以向前或向后显示上一张或下一张照片，按Delete键删除该照片

6、筛选照片_浏览方式(2)：按Ctrl+B，或菜单[视图-审阅模式]，进入审阅浏览模式

7、筛选照片_浏览方式(2)：按四向键可以向前或向后显示上一张或下一张照片，按Delete键删除该照片

8、筛选照片_浏览方式(2)：按住Ctrl键鼠标左键点击画面，可放大100%显示，将放大镜左上角的箭头对准查看部位即可，左键点击退出放大镜

9、筛选照片_浏览方式(2)：加星号和加彩色标签的方法同上。按Esc键退出审阅模式

注：取消星号按数字键0，取消彩色标签再按一次加标签时的数字键——例如取消红色标签按6(在缩览图上取消标签或星号是Ctrl键+数字键)

10、分类观看：在过滤器勾选过滤条件，可以按照标签、星号等过滤条件分类观看照片

11、分类观看：如勾选红色标签，内容框内显示所有红色标签照片

12、分类观看：如勾选3星评级，内容框内显示所有3星照片。其他过滤条件的使用类同

13、进入ACR：在内容浏览框内双击照片，或按Ctrl+R键，可以在不打开Photoshop的情况下进入ACR

教程来源于：https://www.81857.net/soft/62144.html

SS的position 属性指定了组件的定位类型。

定位属性有3个可选值，分别是relative（相对定位）、fixed（固定定位）和absolute（绝对定位）。

一 relative相对定位

相对定位其实是相对于静态定位来说的，组件根据页面的正常流程定位就属于静态定位。而相对定位是指相对于正常位置定位组件。

假设我们有两个组件，这两个组件都没有指定位置，那么如果在hml文件中依次创建这两个组件，则第二个组件会在第一个盒子的下方或后面（取决于组件的排列方向）。

还是以HelloWorld项目为例，现在让第二个文本组件相对其正常位置进行移动。如，使它从原始位置的顶部下移50像素，从原始位置的左侧右移100像素，代码如下：

.text2 {
    font-size: 42px;
    padding: 20px;
    margin: 20px;
    width: 80%;
    border-width: 2px 4px;
    border-color: red green blue yellow;
    border-style: dashed;
    border-radius: 15px 16px 17px 18px;
    position: relative;
    top: 50px;
    left: 100px;
}

使第二个文本组件从原始位置的底部向上移动50像素，从原始位置左移50像素

.text2 {
    font-size: 42px;
    padding: 20px;
    margin: 20px;
    width: 80%;
    border-width: 2px 4px;
    border-color: red green blue yellow;
    border-style: dashed;
    border-radius: 15px 16px 17px 18px;
    position: relative;
    bottom: 50px;
    right: 50px;
}

二 fixed固定定位

固定定位顾名思义就是指组件始终保持在指定位置，即使页面滚动，它也不会移动。固定定位通常用于页面上固定不变的功能性按钮。使用固定定位时，可以使用top属性指定组件从页面顶部开始的像素值，而用left属性指定从页面左侧开始的像素值。假设将相对定位示例中的“position:relative;”修改为“position:fixed;”，在预览器中看效果

.text2 {
    font-size: 42px;
    padding: 20px;
    margin: 20px;
    width: 80%;
    border-width: 2px 4px;
    border-color: red green blue yellow;
    border-style: dashed;
    border-radius: 15px 16px 17px 18px;
    position: fixed;
    top: 50px;
    left: 100px;
}

除了top属性和left属性，还有right属性和bottom属性，它们分别指定盒子距离右侧和底部的像素值。

三 absolute绝对定位

绝对定位是组件相对于具有静态位置的第一个父元素定位。如果找不到这样的组件，则它相对于根组件定位。假设将固定定位示例中的“position:fiexd;”修改为“position:absolute;”。由于第二个text是根组件的子组件，所以它将相对于整个页面定位，显示效果与固定定位的例子一致。如果将第二个text组件放在一个div容器中，那么text就会相对于div定位，如下所示

<!-- index.hml -->
<div class="container">
    <text class="text1">
        Hello World
    </text>
    <div>
        <text class="text2">
            Hello World
        </text>
    </div>
    <button class="button" type="capsule" value="Next" @click="launch"></button>
</div>

.text2 {
    font-size: 42px;
    padding: 20px;
    margin: 20px;
    width: 80%;
    border-width: 2px 4px;
    border-color: red green blue yellow;
    border-style: dashed;
    border-radius: 15px 16px 17px 18px;
    position: absolute;
    top: 50px;
    left: 100px;
}

在某种程度上，绝对定位类似于相对定位，只是绝对定位是元素相对于其父元素而不是相对于其正常位置定位。