CSS3实用方法总结(推荐)

2023-12-02 0 903

1.圆角边框:

CSS Code复制内容到剪贴板

  • border-radius:4px;
  • 2.box阴影:

    CSS Code复制内容到剪贴板

  • box-shadow:5px5px3px#000;/*参数分别为向右拓展距离,向下拓展距离,阴影宽度,颜色*/
  • 3.背景图片大小:

    CSS Code复制内容到剪贴板

  • div{
  • background:url(bg_flower.gif);
  • -moz-backgroundsize:63px100px;/*老版本的Firefox*/
  • backgroundsize:63px100px;
  • background-repeat:no-repeat;
  • }
  • 4.背景图片位置

    CSS Code复制内容到剪贴板

  • div{
  • background:url(bg_flower.gif);
  • background-repeat:no-repeat;
  • backgroundsize:100%100%;
  • -webkit-background-origin:content-box;/*Safari*/
  • background-origin:content-box;/*border-box,padding-box*/
  • }
  • 5.文本阴影

    CSS Code复制内容到剪贴板

  • text-shadow:5px5px3px#000;/*参数分别为向右拓展距离,向下拓展距离,阴影宽度,颜色*/
  • 6.强制自动换行

    CSS Code复制内容到剪贴板

  • p{
  • word-wrap:break-word;
  • }
  • 7.分列

    CSS Code复制内容到剪贴板

  • div{
  • column-gap:3px;/*列间间隔长度*/
  • -moz-column-count:3;/*Firefox*/
  • -webkit-column-count:3;/*Safari和Chrome*/
  • column-count:3;
  • }
  • 以上这篇CSS3实用方法总结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持悠久资源网。

    原文地址:http://www.cnblogs.com/daisykoo/archive/2016/05/24/5522362.html

    收藏 (0) 打赏

    感谢您的支持,我会继续努力的!

    打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
    点赞 (0)

    悠久资源 网站设计心得 CSS3实用方法总结(推荐) https://www.u-9.cn/sheji/xinde/29442.html

    常见问题

    相关文章

    发表评论
    暂无评论
    官方客服团队

    为您解决烦忧 - 24小时在线 专业服务