继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【九月打卡】第2天+CSS3边框 圆角效果 border-radiusCSS3边框 阴影 box-shadow

一只杰尼龟0
关注TA
已关注
手记 24
粉丝 1
获赞 0

第一模块:十天精通CSS3 2-1、2-2、2-3大漠

第二模块:

圆角效果:border-radius:10px; /* 所有角都使用半径为10px的圆角 */ 

border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 

实心上半圆方法:把高度(height)设为宽度(width)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。

实心圆方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半

阴影效果:

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]

http://img4.sycdn.imooc.com/631890ba0001579908940320.jpg

1.阴影模糊半径与阴影扩展半径的区别

阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;

2.X轴偏移量和Y轴偏移量值可以设置为负数

第三模块:css3实现了很多以前需要用图片实现的效果(渐变边框,盒阴影,真正的圆角,字阴影,多 图片背景,字体透明度等) 还统一了部分标准样式(text-overflow,word-wrap,opcity),不必在为firefox连续英文字母折 行的问题写脚本了 增加了新的盒模型模式 border-box,轮廓外边框 outline属性,增加了columns属性,简化 了结构,@font-face属性能使客户机上显示服务端安装的字体


http://img4.sycdn.imooc.com/631891a40001c9e116220848.jpg

http://img1.sycdn.imooc.com/631891a400012a7416040886.jpg

http://img2.sycdn.imooc.com/631891a400011d6116010887.jpg


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP