点缀DIV,加上边框阴影,以及背景透明 辄夜花泽个人博客
User-Profile-Image
辄夜花泽
  • 5
  • 首页
  • 仓库
  • 留言
  • 专题
  • 图标
  • 分类
    • 视频
    • Laravel
    • 工具
    • PHP
    • Html
    • Ajax
    • Javascript
    • Linux
    • Mysql
    • 小程序
    • Api
    • Ecshop
    • Web
    • Jquery
    • ThinkPHP
    • Yii
    • 辄夜花泽
    • 手册
    • 源码
    • 模板
  • 友链
  • 在线工具
    • 抖音视频去水印
    • 在线JSON格式化
    • 正则表达式
Help?

Please contact us on our email for need any support

Support
    首页   ›   Web   ›   正文
Web

点缀DIV,加上边框阴影,以及背景透明

7年前
6823 0 188

1.给DIV加上边框阴影

div{box-shadow:0 0 1px #000 inset;} 

代表边框间距靠左0 靠上0 和1px阴影范围 阴影颜色为黑色(#000),

有inset 代表框内阴影 ,不带inset 代表框外阴影。

注意:

box-shadow:0px 0px 1px #000

第1个值为0时,代表左右边框阴影 为1px范围

第1个值为正整数 代表 左边框阴影

第1个值为负整数 代表 右边框阴影

同理

第2个值为0 代表上下边框阴影

第2个值为正整数 代表1px阴影距离上边框多少

第1个值为负整数 代表下边框阴影设置

在style里面加入,四个角度都要带上

2.实现DIV背景透明

只需要在需要透明的div上加上下面的style:

style="filter:alpha(Opacity=80);-moz-opacity:0.7;opacity: 0.7"

3.实现DIV旋转角度

只需要在需要透明的div上加上下面的style:

那么在CSS3中, transform是什么?

transform的含义是:改变,使…变形;转换

CSS3 transform都有哪些常用属性?

transform的属性包括:rotate() / skew() / scale() / translate(,) ,

分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。

下面我们来分解各个属性的用法:

transform:rotate(10deg);

注意:10deg就相当于10°(度)

transform:rotate():

含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

transform:skew():

含义:倾斜;

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

transform:scale():

含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。


如需转载,请注明文章出处和来源网址:http://johnbin.cn




分享给朋友吧:
微信扫一扫:分享
微信里点“发现”,扫一下
二维码便可将文本分享至朋友圈

声明:

1,如果您发现本文件已经失效不能下载,请 联系站长 修正或 留言!
2,本站提供的资源多数为百度网盘下载,对于大文件,你需要安装百度云客户端才能下载!
3,部分文件引用的官方或者非网盘类他站下载链接,你可能需要使用迅雷、BT等下载工具下载!
4,本站推荐的资源均经由站长检测或者个人发布,不包含恶意软件病毒代码等,如果你发现此类问题,请向站长举报!
5,本站仅提供文件的免费下载服务,如果你对代码程序软件的使用有任何疑惑,请留言。
6,本网站在文章内容仅供于学习参考使用,请勿作为商业通途使用,版权归原作者所有。如您对内容、版权等问题存在异议请与本站联系,我们会及时进行处理解决。

如果本文对您有帮助,欢迎随意打赏作者,让作者坚持创作!

188 打赏
评论 (0)

点击这里取消回复。

欢迎您 游客  

你还可以输入200个字
发布评论
赞赏作者

请通过微信、支付宝 APP 扫一扫

感谢您对作者的支持!

 支付宝 微信支付

辄夜花泽
成功就是妥协与两难的坚持。
你的优秀不需要任何人来证明,要学会欣赏自己。
56 文章 28 评论 2425 点赞 95054 浏览
加QQ群697360424
随机文章
PHPstrom报错
7年前
javaScript-架构手册
7年前
自适应欧美风个人博客模板
7年前
超炫酷离子背景登录界面
7年前
纯净功能齐全版PS cs6
7年前
TP5中的四表联查语句,简单易懂!
7年前
PHPstorm 最新18.2.1版
7年前
新款整套前后台模板
7年前
tags
视频 Laravel 工具 PHP Html Ajax Javascript Linux Mysql 小程序 Api Ecshop Web Jquery ThinkPHP Yii 辄夜花泽 手册 源码 模板
Copyright © 2021 辄夜花泽技术博客. Design of Chasel
主页
导航
  • 专题
  • 留言
博主
辄夜花泽
阿泽泽 博主
纸上得来终觉浅,绝知此事要躬行~
56 文章 28 评论 95054 浏览
博客详情
博主详情