标签: css3

如何使用CSS创建圆角？

我有4个flexbox列,一切正常,但是当我向列添加一些文本并将其设置为较大的字体大小时,由于flex属性,它使得列比应该更宽.

我尝试使用word-break: break-word并且它有所帮助,但是当我将列调整到非常小的宽度时,文本中的字母被分成多行(每行一个字母),但是列的宽度不比一个字母大小小.

观看此视频 (一开始,第一列是最小的,但是当我调整窗口大小时,它是最宽的列.我只想总是尊重flex设置; flex size 1:3:4:4)

我知道,将字体大小和列填充设置为较小会有所帮助......但还有其他解决方案吗？

我不能用overflow-x: hidden.

的jsfiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div> …

我在我继承的CSS文件中找到了这段代码,但我无法理解它:

@media screen and (max-width: 1024px){
    img.bg {
        left: 50%;
        margin-left: -512px; }
}

具体来说,第一行发生了什么？

我希望将单个文字旋转90度,使用跨浏览器(> = IE6,> = Firefox 2,任何版本的Chrome,Safari或Opera)支持.如何才能做到这一点？

我正在使用CMS,我只能访问CSS文件.所以,我不能在文档的HEAD中包含任何内容.我想知道是否有办法从CSS文件中导入Web字体？

我需要为iphone/android手机开发一些html页面,但是max-device-width和之间的区别是max-width什么？我需要为不同的屏幕尺寸使用不同的css.

@media all and (max-device-width: 400px)

@media all and (max-width: 400px)

有什么不同？

是否可以选择一组元素中的每个第四个元素？

例如:我有16个<div>元素......我可以写类似的东西.

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

有一个更好的方法吗？

将SVG输出直接与页面代码一起放置我可以使用CSS简单地修改填充颜色,如下所示:

polygon.mystar {
    fill: blue;
}?

circle.mycircle {
    fill: green;
}

这很好用,但是我正在寻找一种方法来修改SVG的"填充"属性,当它被用作背景图像时.

html {      
    background-image: url(../img/bg.svg);
}

我现在该如何改变颜色？它甚至可能吗？

作为参考,这是我的外部SVG文件的内容:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 
    118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>

<img class="image" src="" alt="" width="120" height="120">

无法让这个动画图像工作,它应该做360度旋转.

我想下面的CSS有些不对劲,因为它只是保持不动.

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { …

是否有可能div在纯CSS 中使50px小于100%？我希望<div>它只比50%小于100%.我不想要任何JavaScript.