Articles in the category of HTML/CSS

HTML/CSS
  1. Home
  2. HTML/CSS

css溢出隐藏

根据宽度展示，超出宽度范围会显示"..."```css white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all; ```### -webkit-line-clamp可以把 块容器 中的内容限制为指定的行数。并且在超过行数后，在最后一行显示"..." 这是正常的展示```css...
  • 逸云先生
  • August 15, 2020
  • No comments

    • 使用CSS打造渐变背景动画

    最近看见很多网站都使用上了渐变动画，我也来分享一个，纯css3实现一款简单的网页渐变背景动画特效，可以在css属性里修改成你喜欢的渐变颜色值和动画时间。```css /* 动态渐变特效*/ body { background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB); background-size: 400% ...
  • 逸云先生
  • August 11, 2020
  • No comments

    • css 实现一个带尖角的正方形

    **html部分：**```css```**css代码：**```css #demo { width: 100px; height: 100px; border: 2px #000 solid; background-color: #fff; position: relative; }#demo:before, #demo:after { width: 0px; height: 0px; b...
  • 逸云先生
  • August 10, 2020
  • No comments

    • css让一张背景图100%的占满屏幕

    第一种：```css background: url(../images/register.png) no-repeat; background-size:100% 100%; width: 100%; height:500px; ```第二种（推荐）：```css background: url(../images/guide_page.jpg) no-repeat center; bac...
  • 逸云先生
  • August 4, 2020
  • No comments

    • css手机滑动效果

    html部分：```css 用品 用品 用品 用品 用品 用品 用品 用品 用品 用品 用品 ```css部分：```css ul { overflow-x: auto; list-style: none; white-space: nowrap; width: auto; }ul li { margi...
  • 逸云先生
  • July 21, 2020
  • No comments

    • CSS3媒体查询

    ```css /* 去除浏览器默认样式 */ * { margin: 0; padding: 0; box-sizing: border-box; }/* 一个高度为100px的盒子 */ header { height: 100px; background: purple; }/* 当浏览器宽度小于768px的时候 header的背景色变为红色 */ @media screen and (...
  • 逸云先生
  • July 19, 2020
  • No comments

    • css美化input单选框按钮

    **html部分：**```css微信支付支付宝支付银行卡支付```**css部分：**```css .xuanxiang { position: relative; line-height: 30px; }.xuanxiang input[type="radio"] { width: 20px; height: 20px; opacity: 0; }.xuanxiang label { p...
  • 逸云先生
  • April 15, 2020
  • No comments

    • 单选按钮css样式的代码

    **html部分：**```css```**css部分：**``` .item { position: relative; line-height: 30px; }input[type="radio"] { width: 20px; height: 20px; opacity: 0; }label { position: absolute; left: 5px; top: 3px; widt...
  • 逸云先生
  • April 2, 2020
  • 1 comments