控件美颜

在知道原理后，想对控件美颜就是一件非常容易的事，大致有下面两种方式：

自定义CSS样式

知道控件的实现原理后，美颜就变得非常简单了，找到对应的class，设置css样式，就轻松搞定，这完全就是css范畴的内容了，比如你可以做到下面这样：

代码只涉及css代码，如下：

.ol-zoom .ol-zoom-in {
    background-color: #0000ff;
    color: #ff0000;
}

这段代码可以放在单独的css文件里面，也可以直接加载<head></head>里面，但必须是在ol.css引入之后加，这样才能覆盖ol3默认的css样式。最简单粗暴的，莫过于直接在ol.css里面修改，但这样侵入性太强，不利于OpenLayers 3的版本升级，升级一次，就得自己修改一次。所以不推荐。

其他控件的css样式修改同上，此处不再累述，请自行修改验证。

JavaScript修改

在前端除了css之外，还可以用强大的javascript代码进行修改，比如像下面这样，把最大化按钮的图标改变一下：

代码如下：

<div id="map2" style="width: 100%"></div>
<script type="text/javascript">
    new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map2',
        view: new ol.View({
          center: ol.proj.transform(
              [104, 30], 'EPSG:4326', 'EPSG:3857'),
          zoom: 10
        })
    });

    // 设置放大按钮符号，下面这个代码需要引入jquery，或者zepto库
    $('#map2 .ol-zoom-in').html('<>');
</script>

使用javascript代码势必能更进一步定制各种控件。