css ps倒过来

html-css09

css ps倒过来,第1张

css可以通过perspective属性来实现。ps可以直接通过滤镜中的翻转效果实现。

对于ps,首先打开Photoshop,导入需要编辑的图片,用选取工具选定图片,在工具栏中打开滤镜效果,选择反转效果即可。对于css,css实现翻转效果的方法,首先创建一个演示方块,并为其添加transition和transform属性,然后将transition属性添加到需要翻转的p上,最后添加perspective和transform-style属性即可。

<div>

    <p>Test</p>

</div>

<style>

div {

    width: 200px

    height: 200px

    background: #272727

    border: 1px #272727 solid

}

p {

    width: 158px

    line-height: 158px

    color: #fff

    text-align: center

    margin: 20px auto

    border-radius: 4px

    box-shadow: inset 0px 2px 8px 2px #000000

    border: 1px #666 solid

    border-left: 1px #131313 solid

    border-top: 1px #131313 solid

}

</style>

当圆角过大时深色边和高光边交界处会露陷,要不露陷的话:

边框渐变,貌似支持的浏览器少

不用边框,用两个div嵌套,外面那个比里面那个大1px,然后外面那个用45度的斜方向背景渐变(支持的浏览器多),里面那个用背景色加内阴影。