vs怎么添加css智能提示_10个简单智能CSS片段

最新推荐文章于 2023-12-14 20:51:28 发布

cune1359

最新推荐文章于 2023-12-14 20:51:28 发布

阅读量684

点赞数

文章标签： css html js css3 java ViewUI

CSS是使网站具有外观的基本语言。尽管CSS是一种简单易懂的语言，而且易于学习，但在某些情况下可能很难利用。不用担心，您可以在网上找到一些解决方法，这里只有10个可以使用的解决方法。

如果您想换行长文本，自动调整表格列的宽度，或者在不使用Gif的情况下创建简单的加载状态，我们将提供一些摘录，以及更多内容。

1.垂直对齐

如果使用CSS，这将使您感到困惑：如何在容器中垂直对齐文本或元素？现在，通过使用CSS3转换，我们可以更优雅地解决此问题，如下所示：

.verticalcenter{
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

使用此技术，所有内容-从一行文本，一系列段落或一个框-都将垂直对齐。就浏览器支持而言，CSS3 Transform可在Chrome 4，Opera 10，Safari 3，Firefox 3和Internet Explorer 9中使用。

2.将元素拉伸到整个窗口高度

在某些情况下，您可能需要将元素拉伸到整个窗口高度。调整基本元素的大小只会调整容器大小，因此要使元素跨越整个窗口高度，我们需要跨越最顶部的元素： html和body 。

html, 
body {
	height: 100%;
}

然后将100％的高度应用于任何元素，如下所示：

div {
	height: 100%;
}

3.根据文件格式应用不同的样式

有时，您可能希望使几个链接看起来与其他链接有所不同，以便更轻松地知道链接的去向。下面的此代码段将在链接文本之前添加一个图标，并对不同类型的源使用不同的图标或图像，在本示例中，该图标或图像是外部链接。

a[href^="http://"]{
    padding-right: 20px;
    background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
}
  
/* pdfs */
a[href$=".pdf"]{
    padding-right: 20px;
    background: url(pdf.png) no-repeat center right;
}

这是它的样子。

4.跨浏览器图像灰度

灰度可以为您的网站提供更深的基调，使其看起来更加优雅，有时甚至是简约的。在这里，我们将使用SVG向图像添加灰度滤镜。这是我们应用灰度的方法：

<svg xmlns="http://www.w3.org/2000/svg">
	<filter id="grayscale">
		<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
	</filter>
</svg>

为了提供此跨浏览器，我们以这种方式使用filter属性：

img {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

5.动画渐变背景

CSS中最诱人的功能之一就是可以添加动画效果。您可以设置背景颜色，不透明度，大小的动画，但不幸的是，不能设置“渐变颜色”的动画。目前，您无法为渐变背景设置动画，但是此片段可能会有所帮助。它会移动背景位置，使其看起来好像在设置动画。

button {
	background-image: linear-gradient(#5187c4, #1c2f45);
	background-size: auto 200%;
	background-position: 0 100%;
	transition: background-position 0.5s;
}	 
button:hover {
	background-position: 0 0;
}

这是一个演示，向您展示其功能。

6. CSS表列自动宽度

表格很麻烦，特别是在调整列的宽度时。但是，您可以使用一个快捷方式。在td元素中添加white-space: nowrap ，以轻松纠正文本换行。

td {
    white-space: nowrap;
}

查看演示以比较结果。

7.仅在一侧或两侧显示框阴影

如果您想拥有盒子阴影，请尝试此技巧，它可以使您在盒子的任一侧都有盒子阴影。为此，首先定义一个具有特定宽度和高度的框。使用:after伪元素给它阴影，然后四处移动以获取正确的位置。这是创建仅底部阴影的代码：

.box-shadow {
    background-color: #FF8020;
    width: 160px;
    height: 90px;
    margin-top: -45px;
    margin-left: -80px;
    position: absolute;
    top: 50%;
    left: 50%;
}
.box-shadow:after {
    content: "";
    width: 150px;
    height: 1px;
    margin-top: 88px;
    margin-left: -75px;
    display: block;
    position: absolute;
    left: 50%;
    z-index: -1;
    -webkit-box-shadow: 0px 0px 8px 2px #000000;
       -moz-box-shadow: 0px 0px 8px 2px #000000;
            box-shadow: 0px 0px 8px 2px #000000;
}

这是演示：

8.包装长文本上下文

如果遇到的单词长于容器本身，那么此技巧将对您有所帮助。默认情况下，无论容器的宽度如何，文本都将水平填充，例如：

使用简单CSS代码，您可以使文本调整容器的宽度。

pre {
	white-space: pre-line;
	word-wrap: break-word;
}

这是现在的样子：

9.制作模糊的文字

想要使文字模糊吗？我们所能做的就是使颜色透明，然后再添加这样的文本阴影。

.blurry-text {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

瞧，您得到了一些模糊的文字。

10.使用CSS动画制作省略号动画

这些片段将帮助您制作一个称为省略号的动画，该动画可用于制作简单的加载状态，而不是使用gif图像。

.loading:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}

让我们看一下演示。

练习一下代码片段，并尝试使用它还可以做些什么。